Week 5: JavaScript herhaling & code challenge bespreken

1 / 33
volgende
Slide 1: Tekstslide
JavaScriptMBOStudiejaar 2

In deze les zitten 33 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min
Dit is niet oké

Onderdelen in deze les

Slide 1 - Tekstslide

Terugblik
Truthy and Falsy values
Equality operators
Boolean Logic
Code challenge

Slide 2 - Tekstslide

Doel van deze les
Code challenge bespreken
Oefenen met de materie van deze week

Slide 3 - Tekstslide

let test;

Wat is de waarde van test?
A
True
B
False
C
Truth
D
Undifiened

Slide 4 - Quizvraag

Truthy & Falsy values
Maak de volgende variabelen aan:

console.log(Boolean(0));
console.log(Boolean(undefined));
console.log(Boolean('Taif'));
console.log(Boolean({}));
console.log(Boolean(''));
Klik mij!
Console.log is lang typen. Probeer eens log te typen 😉

Slide 5 - Tekstslide

Truthy & Falsy values
const money = 0;
if (money) {
    console.log(`Don't spend it all ;-)`);
} else {
    console.log(`You should get a job!`);
}

Slide 6 - Tekstslide

Truthy & Falsy values
let height;
if (height) {
    console.log(`YAY! Height is defined`);
} else {
    console.log(`Height is UNDEFINED`);
}

Slide 7 - Tekstslide

avDolphins === `97`;

Wat is de waarde van avDolphins?
A
True
B
False
C
String
D
Undifiened

Slide 8 - Quizvraag

Equality operators
const age = 18;
if (age === 18) console.log(`You just became an adult`);


Strict equality operator. Deze operator voert geen type coericion uit en werkt alleen als beide exact dezelfde zijn.

Slide 9 - Tekstslide

Equality operators
const age = `18`;
if (age == 18) console.log(`You just became an adult (loose)`);

Vermijd zoveel mogelijk de loose equality operators omdat het veel moeilijk te vinden bugs introduceert!
Loose equality operator. <u>Deze operator voert type coericion uit</u> en werkt alleen als beide dezelfde zijn.

Slide 10 - Tekstslide

Prompt
const favourite = prompt(`What's your favourite number?`); 
console.log(favourite);
console.log(typeof favourite);

Slide 11 - Tekstslide

const name = `123`
if (name === 123) ....

Resultaat is false; hoe kan name converteren om een true te krijgen?

Slide 12 - Open vraag

Type converter
Wij moeten een Number type conversion uitvoeren op favourite!

const favourite = Number(prompt(`What's your favourite number?`));

In het rood staat wat ik heb toegevoegd.

Slide 13 - Tekstslide

Else if
if (favourite === 23) { 
    console.log(`Cool! 23 is an amazing number!`);
} else if (favourite === 7) {
    console.log(`7 is also a cool number`);
} else {
    console.log(`Number is not 23 or 7`);
}

Slide 14 - Tekstslide

let name = 123;
if (name != 23) console.log(`...`);

Waarom is dit niet volgens de afspraak?
A
23 moet met backticks
B
Dit is een boolean operator
C
Dit is een loose operator
D
De ... is fout

Slide 15 - Quizvraag

Different operator
if (favourite !== 23) { 
    console.log(`Why not 23?`);
}

Slide 16 - Tekstslide

Logical operator
Equality operator
Truthy<div><span>Falsy Values</span></div>

Slide 17 - Sleepvraag

Welke afbeelding hieronder, is een truth table?
A
B
C
D

Slide 18 - Quizvraag

Boolean operators
A: Sarah has a drivers license

B: Sarah has good vision

Slide 19 - Tekstslide

Kan Sarah zowel een rijbewijs hebben EN goed zicht?
Ja
Nee

Slide 20 - Poll

Truthtable (waarheidstabel)

Slide 21 - Tekstslide

Kan Sarah zowel een rijbewijs hebben OF goed zicht?
Ja
Nee

Slide 22 - Poll

Truthtable A OR B

Slide 23 - Tekstslide

Boolean operators
age = 16;
A: Age is greater or equal to 20;

B: Age is less than 30;

A OR !B >> Check de precedence!

Slide 24 - Tekstslide

Logical operators
const hasDriversLicense = true; // A
const hasGoodVision = true; // B

console.log(hasDriversLicense && hasGoodVision);

Slide 25 - Tekstslide

const hasDriversLicense = true; // A
const hasGoodVision = false; // B

console.log(hasDriversLicense && hasGoodVision);
A
True
B
False
C
Truth
D
☝🏼

Slide 26 - Quizvraag

Logical operators
const hasDriversLicense = true; // A
const hasGoodVision = false; // B

console.log(hasDriversLicense || hasGoodVision);

Slide 27 - Tekstslide

Logical operators
const hasDriversLicense = true; // A
const hasGoodVision = false; // B

console.log(!hasDriversLicense);

Slide 28 - Tekstslide

Logical operators
const hasDriversLicense = true; // A
const hasGoodVision = false; // B

const shouldDrive = hasDriversLicense && hasGoodVision;
if(shouldDrive) {
console.log(`Sarah is able to drive!`);
} else {
console.log(`Someone else should drive...`);
}

Slide 29 - Tekstslide

Logical operators
const isTired = true; // C

const shouldDrive = hasDriversLicense && hasGoodVision && isTired;

const shouldDrive = hasDriversLicense || hasGoodVision || isTired;

Slide 30 - Tekstslide

Logical operators
const shouldDrive = hasDriversLicense && hasGoodVision && isTired;

if(hasDriversLicense && hasGoodVision && !isTired) {
console.log(`Sarah is able to drive!`);
} else {
console.log(`Someone else should drive...`);
}

Wat komt hier uit? (Verander C naar false)

Slide 31 - Tekstslide

Extra oefening 1

Slide 32 - Tekstslide

Extra oefening 2

Slide 33 - Tekstslide