Lecture 10

Conditions

What we would cover?

  • If else blocks
  • String comparison
  • Switch case blocks
  • Number comparison
  • Practice

Time for a super-hero challenge 🦸

  • You have just joined the Avengers team
  • Time to greet all your new team mates
  • 
						const name = "Spider-Man";
						alert("Hi " + name + "!");
  • Challenge: Do not reveal super-hero names when not on a mission
  • 
						const realName = "Peter Parker"
						const heroName = "Spider-Man";
						alert("Hi " + ??? + "!");

if Statements

  • So far we are all in class
  • But what if we go on a mission 🤪
  • It runs code only under certain conditions
  • For conditions, you can e.g. compare two variables
  • For equality we use === (yes, triple! 👀)
  • Example: dog === "chihuahua"
  • Compares two things, e.g., two variables, a variable and a value, ...

Lets get a bit more practical

So how do we define a condition

  • 
						if (condition) {
							//conditional code here...
						}
					
  • 
						function greetOnlyMe(){
						const name = prompt("What is your name");
						if (name === "Anna") {
							alert("Hi Anna!");
						}}
						greetOnlyMe();

Challenge accepted: lets greet your favourite 🥰 super hero

  • Super hero has a real name and a hero name
  • Ask if we are on the mission
  • If answer is "yes", say hi with super-hero name
  • If answer is "no", say hi with real name
  • 
						const onMission = prompt("Are we on a mission?");
						if(){
							alert();
						}
						if(){
							alert();
						}

Avengers always have a plan-B

  • 
						function greetHero() {
						const heroName = "Rocket Raccoon"
						const realName = "Peter Quill's pet";
						const onMission = prompt("Are we on a mission?");
						if(onMission === "yes"){
							alert("Hey there, " + heroName + " 👋");
						}else if(onMission === "no"){
							alert("Hey there, " + realName + " 👋");
						} else {
							alert("Hey there, cute fluffy creature 👋");
						}}
						greetHero();
  • if can be followed by else block
  • else if checks other if condition
  • else covers all other cases

Lets practice if and else a bit more

  • 
						function getFavouritePet(pet){
							if(pet === "dog"){
								alert("I ❤ dogs");
							}else if(pet === "cat"){
								alert("I ❤ cats");
							}else {
								alert("I ❤ goats");
						}}
						getFavouritePet("cat");
					
  • 
						function getFavouritePet(pet){
							if(pet === "dog"){
								alert("I ❤ dogs");
							}else if(pet === "cat"){
								alert("I ❤ cats");
							}else {
								alert("I ❤ goats");
						}}
						getFavouritePet("lion");

Can you find all the errors?

  • 
						function getFavouritePet(pet){
							if(pet === "dog"){
								alert("I ❤ dogs");
							}else if (pet == "cat"){
								alert("I ❤ cats");
							}else {
								alert("I ❤ goats");
							}
						}
						getFavouritePet("cat");

Bonus: there is always another way

  • 
							switch(condition){
								// same as if(condition === "value1"){}
								case "value1":
									// do something
									break; // end the switch
								case "valueN": ...
								default: // else
									// do something
							}
  • The switch expression is evaluated once
  • The value of the expression is compared with the values of each case
  • If there is a match, the associated block of code is executed

Enough words, show me your code!


						alert(getFavouritePet(prompt("Who is the best pet?")));
						function getFavouritePet(pet){
							switch(pet){
								case "goat":
									alert("I ❤ goats too");
								case "cat":
									return "🐱 are also fun!";
								case "":
									alert("stop cheating!");
								default:
									alert("I still ❤ goats more than " + pet);
						}
						alert("I am outside of switch case block");
						}

New challenge: greet a super hero with switch block

  • Super hero has a real name and a hero name
  • Check if we are on a mission
  • Remember plan B
  • 
						let onMission = prompt("Are we on a mission?");
						switch(onMission) {
						case "" :
							alert();
							break;
						default : ... ;
						}

Here is my solution


						const heroName = "Rocket Raccoon"
						const realName = "Peter Quill's pet";
						greetHero(heroName, realName)
						function greetHero(heroName, realName) {
						switch(prompt("Are we on a mission?")){
						case "yes":
							alert("Hey there, " + heroName + " 👋");
							break;
						case "no":
							alert("Hey there, " + realName + " 👋");
							break;
						default:
							alert(aa + bb);
						}}

So what we know so far

  • 
						const name = "Peter";
						alert("Hi " + name + "!");
  • 
					function greetSpiderMan(onMission){
						if(onMission === "yes"){
							return "SpiderMan"
						}else {
							return "Peter"
						}
					}
					alert("Hi " + greetSpiderMan("no"));
						
  • 
					function greetSpiderMan(onMission){
						switch(onMission){
							case "yes": return "SpiderMan";
							case "no": return "Peter";
						}
					}
					alert("Hi " + greetSpiderMan("yes"));

New challenge: age check

  • Imagine you want to make sure the user is 18 or older
  • For kids, you want to show a cool web page
  • Grownups just get a boring page
  • How can you do it with if?

Number comparisons

So far, we can only check for equality, e.g.


						const age = prompt("What's your age?");
						if (age === 19) {
							// Old enough! But what about 20? 21?
						}

Number comparisons

  • How to check for "older than 18?"
  • age > 18
  • The opposite: age < 18
  • Exercise:
    • Write a function "checkAge(age)"
    • If older than 18, return "adult"
    • If younger than 18, return "child"
    • Try it out with some different ages!

Number comparisons

  • Problem: What about age 18? Should count as adult!
  • We need a check "greater than or equal"
  • Try: age >= 18
  • Opposite: age <= 18
  • Update your function with the correct comparisons!

Summary: Comparisons ⚖️

  • Comparisons are what we put inside a if(...)
  • Are used to compare two values
  • === (equals)
  • < (less than)
  • > (greater than)
  • <= (less than or equal to)
  • >= (greater than or equal to)
  • !== (not equal)

Bonus: complex conditions

  • What if we have multiple conditions to check against?
  • Challenge: Show alert if user is 10+ years old and love cats
  • 
						function showCat(age, loveCats){
						if (age >= 10 && loveCats === true) {
							alert('🐱')
						}
						}
						showCat(12, true)
  • We say AND with &&
  • We say OR with ||
  • 
						function showCat(age, loveCats){
						if ((age >= 10 && loveCats === true) || age === 65) {
							alert('🐱')
						}
						}
						showCat(65, false)

lets practice complex conditions

  • age >= 10 && loveCats === true12, true
  • age >= 10 && loveCats === true5, true
  • age >= 10 || loveCats === true5, true
  • (age >= 10 || loveCats === true) && age < 6565, true
  • (age >= 10 || loveCats === true) || age < 6565, true
  • (age >= 10 && loveCats === true) || age < 6565, false

What we finally know


					function greetSpiderMan(onMission, age){
						if(onMission === "yes" && age > 18){
							return "SpiderMan"
						}else if(onMission === "yes") {
							return "Mr SpiderMan"
						}else {
							return "Peter"
						}
					}
					alert("Hi " + greetSpiderMan("yes", 5));

Class work

Instructions here

Homework

Instructions here