Log¡c

 

Decision Making

Scripts often need to behave differently depending upon how the user interacts with the web page and/or the browser window itself.

 

  • Conditional Statements - Checks conditions and changes the behavior of the program accordingly
  • Loops - Occasions where you will need to perform the same set of steps repeatedly

Comparison Operators

Comparison and logic operators will come in handy

>        greater than

<        less than

>=      greater than or equal to

<=      less than or equal to

 

===        strict equality

!==         strict ineqality

&&         logical AND

||          logical OR

 

Conditional Statements

Decision making based on conditions

Conditional statements gives us the ability to check conditions and change the behavior of the program accordingly.

 

Conditional Statements:

  • if
  • else if
  • else

If Statements

Checks for only one condition

Checks Condition

True/False

Executes Statement

False

True

 If Statement

  • Begins with the keyword if
  • The condition that follows the if keyword is wrapped in ( ) parenthesis
  • { } brackets are required after the condition
  • If the condition evaluates to true, the code block inside the if statement will get executed
  • If the condition evaluates to false, nothing happens
if (money >= 500) {
  return "I'm buying some Yeezys!";
 }

If Else Statements

Checks for two conditions

Checks Condition

True/False

Statement 1

False

True

Statement 2

If Else Statements

  • The else keyword follows after the code block of the if statement
  • If the first condition evaluates to true, the first code block will be executed, if it doesn't, the else code block will be executed instead.
if (money >= 500) {
  return "I'm buying some Yeezys!";
 }else{
  return "No fresh kicks for me.";
}

If/Else If/Else Statements

Checks for more than two conditions

Checks Condition

True/False

Statement 2

False

True

Statement 1

Next Condition

True/False

True

Statement 3

False

If/Else If/Else Statements

if (money < 10) {
  return "Love dem Old Navy clearance!";
} else if (money < 20){ 
  return "Stepping up to da GAP!";
}else{
  return "I fancy with Banana Republic."
}
  • The else if keyword follows after the code block of the if statement
  • If the if condition evaluates to true, the first code block will be executed, if it doesn't, the else if code block will be executed, if not, then the else code block will be executed

Switch Statements

Sometimes you'll need to evaluate many different conditions.

Best practice is to use switch statements if you are evaluating 3 or more conditions.

var day = 'Friday';
var menu = null;

switch (day) {
  case 'Monday':
    menu = 'burgers';
    break;
  case 'Tuesday':
    menu = 'tacos';
    break;
  case 'Wednesday' :
    menu = 'chicken katsu curry';
    break;
  case 'Thursday' :
    menu = 'pizza';
    break;
  case 'Friday' :
    menu = 'poke bowl';
    break;
  default: 
    menu = 'spam musubi';

}

console.log(menu);

L∞ps

Automates repetitive tasks

  • Loops allows you to do the same action(s) on every item in a list

Thee types of loops:

  • for loop
  • while loop
  • do while loop

For Loop

Iterates/traverses over a sequence

each item in sequence

Last item reached?

Y/N

Back to sequence

Yes

No

Exit Loop

For Loop

  • Used to run your code a specific number of times
  • For loops starts with the keyword for
  • Parenthesis ( ) follows the for keyword
  • There are three parts inside the parenthesis ( ) :
    • Initialization  var i = 0;
    • Condition  i<10; 
    • Update  i++ 
  • { } brackets are required after the condition
  • Your code block goes inside the brackets { } 
for (var i = 0;  i<10; i ++){
//your code
}

var shoppingList = ['carrot cake', 'Doritos', 'peanut butter', 'poke'];

for(var i = 0; i<shoppingList.length; i++){
  console.log(shoppingList[i]);
};

While Loop

Keeps running as long as the condition is true.

Enter While Loop

Condition

T/F

Back to Condition

False

True

Exit Loop

While Loop

  • Used when you don't know how many times the code should run
  • While loops starts with the keyword while
  • Parenthesis ( ) follows the while keyword
  • There is one condition inside the parenthesis ( ) 
  • { } brackets are required after the condition
  • Your code block goes inside the brackets { } 
while (i < 20){
 //condition

}

var damage = 3;

while(damage < 10){
  console.log('You still kicking!');
  damage++;
}

Do While Loop

  • Similar to the While Loop but it will run the condition at least once, even if the condition evaluates to false.
do{

//condition

}while (i < 1){
 //condition

}


var i = 11;

do{
  console.log('print this at least once');
  i++;
}while(i<10);

Looping through an Object

  • Sometimes you may have to iterate through properties of an object.
  • When you loop through an object, you'll use a for in loop.  
  • The hasOwnProperty() property will allow you to check if a property belongs to an object
for in loop:

var plateLunch = {
  menu: ['Chicken Katsu', 'Loco Moco', 'Crab ragoon'],
  restaurant: 'Mililani Restaurant',
  price: 11,
  kanakAttack: true
}


for(key in plateLunch){
  console.log(plateLunch[key])
}

Summary

  • Conditional statements allow your code to make decisions about what to do next
  • Comparison operators usually return single values of true or false
  • Logical operators allow you to compare the results of more than one comparison operator 
  • If/Else statements allow you to run one set of code if a condition is true, and another if it is false

 

 

 

Additional Resources

  • http://www.w3schools.com/js/js_if_else.asp
  • Javascript & JQuery By Jon Duckett
  • js-basics slides http://slides.com/sgnl/js-basics#/6/1

 

 

 

Made with Slides.com