Week 10: Arrays

1 / 28
volgende
Slide 1: Tekstslide
JavaScriptMBOStudiejaar 2

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

time-iconLesduur is: 60 min

Onderdelen in deze les

Slide 1 - Tekstslide

Terugblik
Wat waren de onderwerpen van vorige week?
Wat heb jij geleerd?

Schrijf het op in de volgende dia.

Slide 2 - Tekstslide

Onderwerpen vorige week?

Slide 3 - Woordweb

Terugblik
  • Strict mode.
  • Functions.
  • Declarative functions.
  • Function expressions (anonymous functions).
  • Arrow functions.
  • Code challenge.

Slide 4 - Tekstslide

Wie heeft de code challenge gemaakt?
Ja, in de les
Ja, thuis
Ja thuis, met behulp van de presentatie(s)
Ja, met behulp van het internet
Nee, niet meer naar gekeken
Nee, maar thuis wel geprobeerd

Slide 5 - Poll

Kwam jij, tijdens het maken van de code challenge, kennis tekort?
A
Ja, de les/uitleg was onduidelijk
B
Ja, er was geen moment om vragen te stellen
C
Nee, maar ik wist niet waar ik moest beginnen
D
Nee, het was voldoende om het te maken

Slide 6 - Quizvraag

Code challenge bespreken
Docent zal het nu samen met jullie maken.
Kijk naar de beamer/bord.

Slide 7 - Tekstslide

Doel van deze les
Advanced fundamentals van JS.
  • Arrays.
  • Objects.
  • Object methods.

Alles wordt afgesloten met code challenges.

Slide 8 - Tekstslide

Arrays
Strict mode is een belangrijke keyword. Het zorgt ervoor dat JS veel oplettender is op kleine foute en zal de compiler vertellen jouw feedback te geven wanneer je onduidelijk bent of een fout hebt gemaakt.

Laten wij dit zien aan de hand van een voorbeeld.

Slide 9 - Tekstslide

Arrays
Strict mode is een belangrijke keyword. Het zorgt ervoor dat JS veel oplettender is op kleine foute en zal de compiler vertellen jouw feedback te geven wanneer je onduidelijk bent of een fout hebt gemaakt.

Laten wij dit zien aan de hand van een voorbeeld.

Slide 10 - Tekstslide

Arrays (alternative declaration)
Strict mode is een belangrijke keyword. Het zorgt ervoor dat JS veel oplettender is op kleine foute en zal de compiler vertellen jouw feedback te geven wanneer je onduidelijk bent of een fout hebt gemaakt.

Laten wij dit zien aan de hand van een voorbeeld.

Slide 11 - Tekstslide

Arrays (alternative declaration)
Strict mode is een belangrijke keyword. Het zorgt ervoor dat JS veel oplettender is op kleine foute en zal de compiler vertellen jouw feedback te geven wanneer je onduidelijk bent of een fout hebt gemaakt.

Laten wij dit zien aan de hand van een voorbeeld.

Slide 12 - Tekstslide

Specifiek element in array opvragen
Strict mode is een belangrijke keyword. Het zorgt ervoor dat JS veel oplettender is op kleine foute en zal de compiler vertellen jouw feedback te geven wanneer je onduidelijk bent of een fout hebt gemaakt.

Laten wij dit zien aan de hand van een voorbeeld.

Slide 13 - Tekstslide

Opvragen hoe lang een array is
Strict mode is een belangrijke keyword. Het zorgt ervoor dat JS veel oplettender is op kleine foute en zal de compiler vertellen jouw feedback te geven wanneer je onduidelijk bent of een fout hebt gemaakt.

Laten wij dit zien aan de hand van een voorbeeld.

Slide 14 - Tekstslide

Hoe kan ik de laatste item in de array opvragen?

Slide 15 - Open vraag

Opvragen hoe lang een array is
Strict mode is een belangrijke keyword. Het zorgt ervoor dat JS veel oplettender is op kleine foute en zal de compiler vertellen jouw feedback te geven wanneer je onduidelijk bent of een fout hebt gemaakt.

Laten wij dit zien aan de hand van een voorbeeld.

Slide 16 - Tekstslide

Mutate the array
Replace the second element.
friends[2] = 'Jay';

console.log(friends);

Conclusie waarom veranderd de waarde van een const!??
Only primitive values are unmutable, array's are not primitive.

Slide 17 - Tekstslide

Mutate the array
friends = ['Bob', 'Alice'];

This is illegal because of the const.

Slide 18 - Tekstslide

Types in arrays
Strict mode is een belangrijke keyword. Het zorgt ervoor dat JS veel oplettender is op kleine foute en zal de compiler vertellen jouw feedback te geven wanneer je onduidelijk bent of een fout hebt gemaakt.

Laten wij dit zien aan de hand van een voorbeeld.

Slide 19 - Tekstslide

Oefening met arrays
//gebruik jouw calcAge functie die jij eerder hebt gemaakt.
const calcAge = function(birthYear) {
    return 2037 - birthYear;
}
//maak een nieuw array genaamd years.
const years = [1989, 1990, 1967, 2002, 2018];

Slide 20 - Tekstslide

Print de eerste twee elementen en de laatste in deze array.

Slide 21 - Open vraag

Oefening bespreken
const age4 = calcAge(years[0]);
const age5 = calcAge(years[1]);
const age6 = calcAge(years[years.length - 1]);

console.log(age4, age5, age6);

Slide 22 - Tekstslide

Every element needs to be an expression
const ages = [calcAge(years[0]), calcAge(years[1]), calcAge(years[years.length - 1])]

console.log(ages);

Slide 23 - Tekstslide

Array methods
Methods are like operations.

Array methods = array operations.

Slide 24 - Tekstslide

Example array methods
friends.push('Jay'); //Add as the last element
friends.unshift('Ross'); //Add Ross as the first element
friends.pop(); //Remove the last element
const popped = friends.pop(); //last element
console.log(friends);
console.log(popped);

Slide 25 - Tekstslide

Example array methods
friends.shift(); //Remove the first element
console.log(friends.indexOf('Monica')); //Retrieve position
console.log(friends.indexOf('Bob')); //-1 if it isn't there
friends.push(23);
console.log(friends.includes('23')); //includes uses strict equality

Slide 26 - Tekstslide

Example array methods
if (friends.includes('Rachel')) {
    console.log(`You have a friend in me!`);
}

Slide 27 - Tekstslide

Functions in functions
Kan ik niet gewoon overal arrow functions gebruiken omdat het zo makkelijk is te gebruiken?

Nee

Dat komt omdat arrow functions geen 'this' keyword ondersteunen. Dit leg ik later uit.

Slide 28 - Tekstslide