Week 6: JavaScript switch statement, expressions, conditional operator

1 / 30
suivant
Slide 1: Diapositive
JavaScriptMBOStudiejaar 2

Cette leçon contient 30 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

Terugblik
Oefeningen.
Code challenge besproken.

Slide 2 - Diapositive

Cet élément n'a pas d'instructions

Doel van deze les
Switch statement.
Statements vs expressions.
Conditional (ternary) operator.

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Switch statements
De switch case is bedoeld voor equality.
Je kan multiple lines of code gebruiken na de ':' .
Makkelijk en overzichtelijk.

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

Wat gebeurt er als je een break vergeet in een case van de switch statement?
A
Dan voert hij de code uit tot de volgende break
B
Dan krijg je een compiler error
C
Dan stopt het programma niet meer
D
Dan slaat hij de code over

Slide 5 - Quiz

Cet élément n'a pas d'instructions

Schrijf het voorgaande switch case in een if else statement

Slide 6 - Question ouverte

Cet élément n'a pas d'instructions

Use a switch statement to log the following string for the given 'language': chinese or mandarin: 'MOST number of native speakers!'
spanish: '2nd place in number of native speakers'
english: '3rd place'
hindi: 'Number 4'
arabic: '5th most spoken language'
for all other simply log 'Great language too :D'

Slide 7 - Question ouverte

Cet élément n'a pas d'instructions

Switch statements
Switch statements worden minder minder vaak gebruikt.
Het hangt af welke stijl jij als programmeur fijner vindt.

Er is in feite geen 'goede' manier.

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

Statements & expressions
Expressions zijn de stukken code die een waarde produceert.

Voorbeeld:
3 + 4

Dit is een expression.

Slide 9 - Diapositive

Cet élément n'a pas d'instructions

1989
Is dit een expression?
A
Ja, dit is een expression
B
Ja, dit is een statement
C
Nee, dit is een waarde
D
Nee dat is uw geboortedatum

Slide 10 - Quiz

Cet élément n'a pas d'instructions

true && false && !false
Is dit een expression?
A
Boolean waarde tellen niet mee als expression
B
Nee, dit is een boolean operator
C
Nee, dit is een logical operator
D
Ja, dit is een expression

Slide 11 - Quiz

Cet élément n'a pas d'instructions

Statements & expressions
Statements zijn acties in het programma. Deze produceren geen waarde maar kunnen wel expressions bevatten.

Slide 12 - Diapositive

Cet élément n'a pas d'instructions

Statements & expressions
Statements zijn acties in het programma. Deze produceren geen waarde maar kunnen wel expressions bevatten.

Slide 13 - Diapositive

Cet élément n'a pas d'instructions

Statements & expressions
Statements zijn acties in het programma. Deze produceren geen waarde maar kunnen wel expressions bevatten.

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

Conditional (ternary) operator
De conditional operator wordt ook wel een ternary operator genoemd omdat hij bestaan uit drie onderdelen:
- condition
- de 'if' gedeelte
- de 'else' gedeelte

Slide 15 - Diapositive

Cet élément n'a pas d'instructions

Conditional (ternary) operator
Laten wij dit ontleden:

const age = 23;
age >= 18 ? console.log(`I like to drink wine 🍷`) :
    console.log(`I like to drink water 💧`);

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

Conditional (ternary) operator
Echter wordt hij vaker gebruikt in de volgende vorm:

const drink = age >= 18 ? `wine 🍷` : `water 💧`;
console.log(drink);

Dit wordt nu gezien als een expression omdat het een waarde produceert!

Slide 17 - Diapositive

Cet élément n'a pas d'instructions

const drink = age >= 18 ? `wine 🍷` : `water 💧`;
console.log(drink);

Vertaal dit eens naar een if else statement.

Slide 18 - Question ouverte

let drink2
if (age >= 18) {
    drink2 = `wine 🍷`;
} else {
    drink2 = `water 💧`;
}
console.log(drink2);
Conditional (ternary) operator
Wat valt je op aan de code wanneer wij dit vertalen naar een if statement?

Slide 19 - Diapositive

Wij moeten drink buiten de if statement declareren. Dit maakt het dat het geen expression kan zijn.

Ons doel was om een expression te gebruiken in een template literal.
Conditional (ternary) operator
Nu kunnen wij dit in een template literal gebruiken:

console.log(`I like to drink ${age >= 18 ? `wine 🍷` : `water 💧`}`);

De ternary operator is niet bedoeld om een if statement te vervangen, het is bedoeld voor snelle en korte beslissingen.

If statement is bedoeld voor meerdere code blocks.

Slide 20 - Diapositive

//Ternary is not meant to replace the if statement. Only for quick decisions.

//If statement meant for multiple blocks of code.
Opdracht 1

Slide 21 - Diapositive

Cet élément n'a pas d'instructions

Opdracht 2

Slide 22 - Diapositive

Cet élément n'a pas d'instructions

Code challenge
Als je hints wilt, ga dan naar de volgende slide

Slide 23 - Diapositive

Cet élément n'a pas d'instructions

Code challenge

Slide 24 - Diapositive

Cet élément n'a pas d'instructions

Slide 25 - Diapositive

Cet élément n'a pas d'instructions

Opdrachten vorige les
Bekijk de volgende slides om de opdracht(en) opnieuw te bekijken en het antwoord(en).

Slide 26 - Diapositive

//Ternary is not meant to replace the if statement. Only for quick decisions.

//If statement meant for multiple blocks of code.
Opdracht Equality Operators: == vs. ===

Slide 27 - Diapositive

Cet élément n'a pas d'instructions

Antwoord Equality Operators: == vs. ===

Slide 28 - Diapositive

Cet élément n'a pas d'instructions

Opdracht Logical Operators

Slide 29 - Diapositive

Cet élément n'a pas d'instructions

Antwoord Logical Operators

Slide 30 - Diapositive

Cet élément n'a pas d'instructions