Week 21: OOP en UML

• JavaScript
• MBO
• Studiejaar 2

Where am I? 🤔

Periode 1: Fundament gelegd

Periode 2: Geavanceerde fundament geleerd

Periode 3: Guess my number project gemaakt

Periode 4: OOP & try/catch versterken

Dit komt even op pauze

Ik ga de komende lessen free-stylen

Huh??

Maar uw geweldige lessen over JS dan? 🥺

Als iedereen snel de stof meester is, dan kunnen wij verder met onze pig game.

Uitleggen dat de komende weken geïmproviseerd zijn. Dit komt vanwege de examenresultaten. Wij gaan OOP & try/catch oefenen.

Lesdoelen

1. Aan het einde van de les kunnen jullie een 'class' maken en overerven in JavaScript.
2. Aan het einde van de les kunnen jullie een class diagram in een 'class' omzetten.

Wat heb je nodig?

Laptop en JS.

....

Verhaal vertellen over de blauwdruk.

Waar staat OOP voor?

1. Onbenullig Onderwerp over Programmeren
2. Overgrote Oven Pizza 🍕🤤
3. Object Oriented Programming
4. Object Oriented Model

Zet dit om in classes (15 min)

Maak deze hiërarchie in JS.

Eigenschappen (10 min)

All birds	Flightless	Flying
name	runningSpeed	viewDistance
age	swimmingSpeed	divingSpeed
speed	flightDuration	diet

Hoe ziet de hiërarchie eruit?

(15 min)

Nu gaan wij een klassendiagram maken van wat wij hebben gemaakt. Dit kan met PlantUML of drawio.

app.diagrams.net

Wie kan de fout spotten?

All birds	Flightless	Flying
name	runningSpeed	viewDistance
age	swimmingSpeed	divingSpeed
speed	flightDuration	diet

Kijk even mee naar de whiteboard

Docent tekent de overervingen

Maak deze hiërarchie in JS.

Wie kan een method bedenken voor deze vogels?

Methods & overerving in UML

Maak deze hiërarchie in JS.

Een class diagram...

1. zorgt voor een hoop onnodige documentatie
2. voor transparantie in je code base
3. is verplicht voor mijn werk
4. is overzichtelijk wanneer ik in OOP programmeer.

Casus (15 min)

Er is een nieuw fabriek genaamd MBOU. MBOU wilt auto's en boten produceren.

- Wat betreft auto's; Er is één offroad auto, één cabrio en één hatchback.

- Wat betreft boten; Er is één jacht en één zeilboot.

Teken een klassendiagram volgens het verhaal hierboven. Voeg eventuele extra klassen toe als jij dat nodig acht.

Casus (10 min)

Er is een nieuwe autofabriek genaamd MBOU. MBOU wilt auto's en boten produceren.

- Wat betreft auto's; Er is één offroad auto, één cabrio en één hatchback.

- Wat betreft boten; Er is één jacht en één zeilboot.

Voeg aan alle klassen de properties en methods toe. Let op! Niet alle klassen hebben properties of methods nodig.

Kijk even mee naar de whiteboard

De docent tekent het diagram samen met jullie.

Maak deze hiërarchie in JS.

Super class

Sub class

Sub class

Sub class

Sub class

Sub class

Wedstrijd (10 min)

Twee groepen moeten zo goed mogelijk klassen maken a.d.v. een klassendiagram.

Waarom gebruiken wij OOP?

Lesdoelen

1. Aan het einde van de les kunnen jullie een blauwdruk maken en overerven in JavaScript.
2. Aan het einde van de les kunnen jullie een diagram in een blauwdruk omzetten.

Wie vond deze les moeilijk te volgen of snel gaan?

Ik heb de les goed kunnen volgen

Het ging nog net. Ik moet het laten bezinken.

Het ging te snel/moeilijk.