tazzai/coderbabez-wk9-js-5

If/else, conditional and logical operators

CoderBabez

Week Eight - If/Else Statements, Comparison Operators, & Logical Operators

Objectives

Use if/else statements with comparison and logical operators to branch your code.

Vocab

• If/else statements
• Comparison operators
• Logical operators

If/else statements

Use if/else statements to branch code depending on state.

if (/* condition */) {
  // do something if condition is true
} 
else {
  // otherwise, do something else
}

You can keep going

if (/* condition 1 */) {
  // do thing 1
}
else if (/* condition 2 */) {
 // do thing 2 if condition 2 is true
} 
else if (/* condition 3 */) {
  // do thing 3 if condition 3 is true
}
// ... and so on
else {
  // do a default thing
}

Only ONE of the above statements will execute. If condition 1 is true, it will do action 1 and then break out of the if/else statement. So if condition 3 is also true, we won't do thing 3.

You actually don't even need an else

if (/* this is true */) {
  // do something 
}
// and carry on

Example:

if (temperature > 80) {
  console.log("too hot");
}
else if (temperature < 50) {
  console.log("too cold");
}
else {
  console.log("just right");
}

Comparison operators

What is truth?

How do we identify the truth?

We have comparison operators!

Like strings and numbers, there's a data type called a boolean that is either true or false. The result of comparison operators is either true or false

Give that x = 5 ...

Operator	Description	Comparing	Returns
==	equal to	x == 8	false
		x == 5	true
		x == "5"	true
===	equal value and equal type	x === 5	true
		x === "5"	false
!=	not equal	x != 8	true
!==	not equal value or not equal type	x !== 5	false
		x !== "5"	true
		x !== 8	true
>	greater than	x > 8	false
<	less than	x < 8	true
>=	greater than or equal to	x >= 8	false
<=	less than or equal to	x <= 8	true

Logical operators

Remember that only the first match in an if/if else/else block executes. What if you want to do something if multiple things are true?

Logical operators!

Logical operators combine true/false statements so you can combine comparison operators.

Give that x = 6 and y = 3 ...

Operator	Description	Example
&&	and	(x < 10 && y > 1) is true
||	or	(x == 5 || y == 5) is false
!	not	!(x == y) is true

Project helper

In a click handler, there's a special object you get that is obnoxiously called this. this refers to the object that is clicked. You can use it to get information about the object that was clicked.

If you have multiple buttons, you can get the value on the button like so:

<button>Button 1</button>
<button>Button 2</button>

$('button').click(function() {
  console.log($(this).html());
}

Or you could get attributes from the tag

<button data-custom='dog'>Button 1</button>
<button data-custom='cat'>Button 2</button>

$('button').click(function() {
  console.log($(this).attr('data-custom'));
}

Project

Rock, paper, scissors! The user picks rock, paper, or scissors. Compare that to the computer's choice and show who wins.

Take a look at the live site: https://becsegal.github.io/coderbabez-wk9-js-5/

• What are the html elements?
• How can you tell which button was clicked?
• How do you know who wins?
• What operators do you need?

Reference:

• https://www.w3schools.com/js/js_if_else.asp
• https://www.w3schools.com/js/js_comparisons.asp
• https://api.jquery.com/click/