Use if/else statements with comparison and logical operators to branch your code.
- If/else statements
- Comparison operators
- Logical operators
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");
}
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 |
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 |
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'));
}
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?