Javascript Basics: Conditionals, Switch Statements, Loops

JavascriptBasics.md

Javascript Basics: Conditionals, Switch Statements, Loops

Objective

Learn and be able to apply conditionals, loops, and switch statements to problem solving. Learning the syntax will be the first step, but once you've got that down, focus on problem solving.

Conditionals

Conditionals control the flow of a program. Conditionals decide which code statements gets run based on some input to the conditional. An example from everyday life would be:

If you spend $100 or more, then you get 20% off, otherwise the purchase is full price

In the example above, the input to the conditional is the total ammount of your purchase.

If

The most basic control flow statement is the if statement. Here is our example from above in code:

var total = 284; // Some value

if ( total >= 100 ) {
   total = total * .8;
}

// More code to display the total to the user

console.log("Your total is: $" + total.toFixed(2));

Exercise

Write a program that prompts for a users name, then says hello to the user. The program should have a special hello prompt if the user enters your. Here is an example input and output:

> Please enter your name: Colt

Hello Colt.  What are you doing here?

> Please enter your name: Tim

Hello Terriffic Tim!! Welcome back.

Multiple If Statements

A program can have multiple if statements when we have multiple control flow needs. For example, we could have a special greeting for multiple names:

var name = prompt("Please enter your name:");

if (name === "Tim") {
   console.log("Hello Terriffic Tim! Welcome Back.");
}

if (name === "Colt") {
   console.log("Hello Crazy Colt!  Stop messing with my computer");
}

if (name !== "Colt" && name !== "Tim") {
   console.log("Hello " + name + ".  What are you doing here?");
}

Using our store discount example. How would we express 25% off for a purchase of $300 or more and 20% off for a purchase of $100 or more?

If, else

The multiple if statement code we've written so far can get a little confusing. It is really more suited for an if else control flow statement. If else statements work together. Here is the basic flow and syntax:

if ( /*some expression */) {

	// If the expression is true, run this code

} else {

    // If the expression was false, run this code instead.

}

We can string together if else statements like this:

if ( /*some expression */) {
    // run this code
} else if ( /* some other expression */ ) {
    // run this code only if the first expression is false and this expression is true
} else {
    // run this code if the first two expressions were false
}

Booleans and Comparision Review

Let's take a minute to review booleans and comparisions. What does the following expression evaluate to?

var bankAccount = 7000; // I'm rich in most cities other than SF
var RENT = 3000;
var CAR_INSURANCE = 250;
var COMCAST = 115; // Way too expensive
var CAR_PAYMENT = 120;
var NEW_PET_COST = 3000; // An extravegent pet
var funSpending = prompt("How much fun money are you going to spend? ");
var areYouFinanciallyWise = prompt("Are you financially wise? ");

if (areYouFinanciallyWise === "no") {
    areYouFinanciallyWise = false;
} else {
    areYouFinanciallyWise = true;
}

if ((bankAccount > RENT + CAR_INSURANCE + CAR_PAYMENT + COMCAST + funSpending) || !areYouFinanciallyWise) {
     console.log("Congrats, you are buying a new pet liger (half tiger, half lion) name fluffy.");
} else {
     console.log("Sorry, no liger for you");
}


Exercises

How could we rewrite the store discount code to be a little more clear?

Rewrite the Tim and Colt name prompt code to use if, else.

Switch Statements

Switch statements are another way to express a very common structure:

if () {
} else if () {
} else if () {
} else {
}

Here is the syntax for a switch statement which would replace our if, else if, else construct:

switch (/* our expression */ ) {
   case /*value 1*/:
       // some code
       break;
   case /*another value*/:
       // some code
       break;
   default:
       // the default code, just like the else block
       break;
}

Here is a code example

var typeOfPet = prompt("What type of pet do you have?");
switch (typeOfPet) {
	case "dog":
	   console.log("A " + typeOfPet + " is a normal pet");
	   break;
	case "cat":
	   console.log("A " + typeOfPet + " is a normal pet");
	   break;
	case "parrot":
	   console.log("A " + typeOfPet + " is a normal pet");
	   break;
	case "liger":
	   console.log("WOW! You have a liger.  You are so cool!");
	   break;
	default:
	   console.log("I have never heard of that type of pet");
	   break;
}

Loops

Loops are essential to programming. They allow us to repeat an operation many times. Typically, execution of a loop lasts as long as a certain value holds true. The first type of loop we'll talk about is a for loop

For Loops

For loops are common in C style programming lanauges. They are a concise way to express how a loop should be initialized, how long a loop should run, and what action should be taken at the end of each iteration. The general syntax is below:

for (initialization; conditional; post loop increment) {
    // Some code to run.
}

Here is an example where we print the numbers 1 to 10:

for (var i = 0; i < 10; i++) {
   console.log(i + 1)
}

Excercise

Print the numbers 1 to 10 and also the number 10 to 1, side by side. The output should look like this:

1  10
2  9
3  8
4  7
5  6
6  5
7  4
8  3
9  2
10  1

While loops

A while loop is another way of constructing a loop. Here is the syntax:

while ( /* Boolean expression */ ) {
    Execute code
}

Here is an example:

var timesForPhrase = 10;
var phrase = prompt("What do you want to say " + timesForPhrase + " times?");

var i = 0;
while (i < timesForPhrase)  {
   console.log(phrase);
   i++;
}

Exercise

Print the numbers 1 to 10 and also the number 10 to 1, side by side. This time make sure to use a while loop instead of a for loop.

Exercise

Write a program that checks if a phrase is a palindrome. For example, the name ana is a palindrome because it is the same forwards as it is in reverse. Extra credit Ignore capitalization when checking for palindromes.