JavaScript: Variables
Functions
Conditionals
Loops

Variables

Typing

JavaScript isn't really a typed language. This means that you don't have to worry much about what kind of thing you are dealing with. We don't have to do anything special to set or get values from a text field depending on whether they are numbers or characters.

Variables

Sometimes we need a place to hold a value. We might need a copy so we can change something and then change it back. Or we might need to hold onto part of a calculation while we complete other parts. Or it might represent something we need later, like a window we might create or a picture. To do this, we can create variables. These are little boxes that can hold any value. But they can only hold one value at a time. You make a variable like this.

var varname; or
var varname=value;
varname can be most anything. It has to start with a letter or an underscore (_). This can be followed by any number of letters, digits or underscores. No spaces or other punctuation. It can't be one of the reserved words in JavaScript like var or function. There is no length limit, but remember, you have to type it.

Scope

The scope of a variable is where it can be seen. That is, which parts of the program can see the variable. In JavaScript, we have essentially two scopes. Global variables can be seen anywhere on the web page that contains it. This is like having a sign on the outside of a business. Everybody on the street can see it. But the business next door can't see the signs on the inside. These inside signs are what local variables are for. They are not visible outside the function they are defined in. Only code inside the function can set or get them.

Usage

Variables can be used anywhere it makes sense to put their value. So, you can use a variable that contains a number anywhere you could put a number. Like in arithmetic, comparisons, etc. Same with variables that hold strings.

Expressions

Expressions can be just a variable by itself or they can be variables, numbers and operators. There are two main classes of operators, arithmetic and logical. Arithmetic operators include
+addition
-subtraction
/division
*multiplication
%modulo (remainder)
Logical operators include
==is equal
!=is not equal
<is less than
>is greater than
>=is greater than or equal to
<=is less than or equal to
&&and
||or
Parentheses can be used to group parts of an expression.

Assignment

Assignment copies a value from one variable to another or sets a variable to a value. The operator for this is a single =. Some examples are:

a = 3; // copies 3 to variable a
a = 3 + b; // copies the result of adding 3 to the value in b into a
The left side cannot be an expression so
a = (3+b) * 2 + document.form1.text1.value;
is fine but
4 = 9;
is not. Nor is
(a + 3) = 9;
Note that these are instructions not algebra. So
a = a + 1;
changes the value of a by adding one to it. It does not mean that 0 = 1 like it would if this was algebra. These are instructions for the computer to add one to the current value of a.

This is different than how people do this. If somebody gives you a quarter, you just put it in your pocket. The computer equivalent is to take all the coins out of your pocket, put the quarter in the pile and put them all back into your pocket.

There are some short cuts available for common operations
a++; a = a + 1;
a--; a = a - 1;
a += 3; a = a + 3;
a -= 3; a = a - 3;
a *= 3; a = a * 3;
a /= 3; a = a / 3;

Functions

Functions are a named group of instructions. You can give the group some values to work with and they can send back a result. The values you send in are called parameters or arguments. They are treated like a local variable and you can have as many as you want. Functions can only send back or return a single value. Function names can be any variable name.

Functions have to be defined before you can use them. A definition looks like this

function squareit(n)
{
var result = n * n;
return result;
} // squareit
Using it is easy. You can use a function (the technical term is to call it) anywhere the kind of thing it returns is used. This is like variables So the function above could be used anywhere a number can.
var x = 9;
var xsquared;
xsquared = squareit(x);
These can be mixed into an expression like
var n = 3 * squareit(3);
Functions don't have to return anything. In that case, you just call it by itself.
doit();

Conditionals

The purpose of a conditional statement is to alter the flow of control. What that means is that you can do different things depending on the conditions. The whole thing looks like:

if(expr) {
code section 1
}
else {
code section 2
}
If the expression is true, then the JavaScript in code section 1 is done. If it is false, the code in section 2 is done. Here are a couple of variations on this.
if(expr) {
code section 1
}
code section 2
Code section 2 is done regardless of whether the expression is true or false. If it is true, then code section 1 is done first, followed by code section 2. This is different from the earlier example in that only one of the two pieces of code is done in the other example.

You can also nest the statements like this.

if(expr1) {
code section 1
}
else
if(expr2) {
code section 2
}
else
code section 3
Now, if the expression is true, only section 1 is done. If it is false, then expression 2 is checked and if it is true, then section 2 is done. If expression 2 is false, then section 3 is done. So, section 2 is only done if expression 1 is false AND expression 2 is true. Section 3 is only done if expression 1 is false AND expression 2 is false.

Another way to alter program flow is to use a switch statement. This works pretty much the same as a nested if-else complex, but is much easier to read.

switch(expr) { case value: code1; break; case value2: code2; break; default: code3; break; } // esac
This compares the value of expr to each of the values in the case statements. When one matches, it executes the code after the : and before the break. Only one of the cases is run, even if several match the expression. In this case, it only runs the first one. If none of the cases match, the code in default is run. The default case is optional. After the case is handled, the code after the closing brace is run. The values can be numbers or strings. The switch above is the same as this nested if statement.
if(expr1 == value1) {
code1
}
else
if(expr == value2) {
code2
}
else
code3

Loops

Many times you want the same code to be run several times. This is different than a function. You might want to run the same code several times in a row. JavaScript supports several ways to do this. The while loop uses an expression to control how many times the code is run. It keeps running the code until the expression is false. The general syntax is:

while(expr) {
code;
} // while
If the expression is false before the loop starts, the code won't be executed at all (if will get a pardon). Like an if statement, when the loop is completed, the code after the ending brace is run. A while loop will run the code 0 or more times.

If you want the code to run at least once, use a do loop. In a while loop, the expression is checked before the code is run. In a do loop, it is checked after.

do {
code;
while(expr);
} // while
This will run the code 1 or more times. It checks the condition at the bottom of the loop.

The last loop structure is best if there is a fixed number of times you want the code to run. The for loop is given a start value, a check for when it is done and how to change the value.

for(i=0; i<10; i++) {
code;
} // for
The loop starts with the i variable being set to 0. The check is done next and if it is true (i < 10), it will run the code. After the code is finished, it increments the i variable and does the check again. When the check is false, the loop ends. You can use any variable, i is just a common choice. The increment can be anything. To go backward, use i--. Or operators like += to increment by a value other than one.

The loops can replace each other. For example, the loop above could be written as a while loop.

var i = 0; while(i < 10) { code; i++; } // while
If you want the loop to stop at some point other than when the expression says to, you can use the break statement. The loop stops and the code after it is executed. The continue statement cause the loop to start at the top again as if the code had finished.