2: Introduction to JavaScript
PROGRAM FLOW
Program Flow
Normally program flow is top to bottom, left to right. If that we the only option available to us, we’d have a lot of very linear programs and not a lot of interactivity. There is also conditional program flow, these are ways that expressions can be evaluated to produce different output. There are a few workhorse statements in JavaScript that help us direct the computer to do different things based on different conditions.
They are the if statement, associated else and if else statements as well as looping statements such as while, do/while, and for.
Branching Logic
Our first batch of statements handle ‘branching’ within our programs. What I mean by this is that we evaluate a statement, and then do something depending on the way that statement evaluated. Think of it like a fork in the road, or even a huge public square with many many paths leading out.
The if statement
if(true) {
console.log(‘true’);
}
//trueif(1+1 === 2) {
console.log(‘all is well’);
}
//all is well
We can also use the if statement to check if something is not true. Really it will evaluate whatever expression you give it and if it’s true, it will execute whatever is between the { }
if(!(1+1 === 2)) {
console.log(‘something is very wrong with your computer. It can not even add’);
} else {
console.log(‘all is well’);
}
//something is wrong with the computer. It can not even add.The else statement

As you can see about, this is the IF/ELSE statement syntax. First, Javascript will evaluate the statement in ( ), then if false and there is an else following the closing }, it will execute that statement.
You can also add even more conditions to check before the else statement by using the if else statement after the first if statement.
const canPaint = false;
const isCat = true;
const isBear = true;if(canPaint && isCat) {
console.log(‘I think we should name him Bob Ross Cat’);
} else if(isCat) {
console.log(`Since he can’t paint, let’s name him Peaches`);
} else if(canPaint || isBear) {
console.log(`That could be a bear, or it could be a man, but oh boy can it paint.`);
} else {
console.log(`That is a skunk! Eeeeeck!`);
}//Since he can’t paint, let’s name him Peaches
CHALLENGE 1: You have a very secret note that you need to pass to a friend, but you only have access to a public computer running a Chrome web browser. How can you create a program to PROMPT for a password and only show your secret message if the password is correct?hint: you can assign the output of functions to a variable :)
--solution below--if(prompt(‘password?’) === ‘hunter2’) {
console.log(‘you should really change your password’);
}
The switch statement

You can probably see how messy those if/else statements could get. Ugh. Luckily, there’s a better syntax for comparing, called the SWITCH statement.
The syntax can be a bit confusing, for the switch statement. So here it is:
switch(expression) {
case 1: {
code block
}
break;
case 2: {
code block
}
break;
case 3: {
code block
}
break;
default: {
code block }How it works:
1. The switch expression is evaluated once.
2. The value of the expression is compared with the values of each case.
3. If there is a match, the associated block of code is executed.
note the inclusion of the break; statement.
const catName = ‘Chaos’;switch(catName) {
case ‘Mr. Bigglesworth’: console.log(`do you have any sharks?`);
break;case ‘Chaos’: console.log(`warning: do not allow ${catName} near the plants!`);
break;case ‘Bob Ross’: console.log(`oh, that’s just ${catName} cat painting a nice scene, don’t worry.`);
break;
default: console.log(`I’m sorry, I don’t know ${catName}.`)
}
Loops and Iterative Statements
Sometimes, you want to do something over and over again until some condition is met (or even forever). This is the realm of loops and iterative control flow statements.
The while and do loops
Let’s make a program to count from 0 to 5!
console.log(0);
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);//0
//1
//2
//3
//4
//5
That took more time for me to write then speak. Computers are supposed to help make us faster, not slower. Enter the concept of iteration.
The while loop is a good candidate to help us here executes code until the condition evaluates to true.
syntax:
while (condition) {
code block to be executed
};So in the case where we want the computer to count from zero to 5? Is this possible with the knowledge we’ve gained so far?
let counter = 0
while (counter < 6) {
console.log(counter);
counter = counter + 1;
}Extra: what happens if we change let to const above?
The do loop
The do loop executes code at least , even if the statement is false. Can you guess why?
Here the syntax:
do {
code block to be executed
}
while (condition)OPTIONAL CHALLENGE: re-write your early password prompt to keep asking for the password until it gets the proper one. This is a little bit tough for your first programming lab...hint: use a do loop and and if statement :)--solution below--
let authorized = false;do {
if(prompt(‘password?’) === ‘hunter2’) {
console.log(‘you should really change your password’);
authorized = true;
} while (!authorized);
}
The for loop
For Loops are handy, if you want to run the same code over and over again, each time with a different value.
Here is the syntax:
for (statement 1; statement 2; statement 3) {
code block to be executed
}Statement 1 is executed (one time) before the execution of the code block.
Statement 2 defines the condition for executing the code block.
Statement 3 is executed (every time) after the code block has been executed.
Let’s return to our earlier example of counting from 0 to 5, waaaaaay easier with a FOR LOOP
for(i=0;i<6;i++) {
console.log(i);
}In this case, it’s common to assign a variable (binding!) such as i to the counter variable, then do a condition check, then increment with i++ (i = i + 1) would also work.
Incrementing Values
Let’s say we wanted to have a way to make sure an intruder can’t brute force their way through our password prompt. We’d need something that stops you from trying to enter a password too many times. We’ve already incremented a value in the previous do example.
Let’s go ahead and make our system super secure by only allowing someone to enter an incorrect password 3 times.
Execute the code below in your Browser’s JavaScript runtime environment console:
let counter = 0;
let authorized = false;do {
if(prompt(‘password?’) === ‘hunter2’) {
console.log(‘you should really change your password’);
authorized = true;
} else if (counter > 2) {
alert(`HACKER DETECTED!`);
break; //we add this to remove the prompt
} else {
counter++;
}
} while (!authorized);
Notice that instead of writing counter = counter + 1, we can simply write counter++.This is a simple say of implementing incrementing and decrementing in JavaScript. For more on incrementing and decrementing values in JavaScript, see this article.

