Leerdoelen
- Eigenschappen van JS-objecten
- Uitvoeren naar DOM
- JS Date-object met methods
- Arrow-functies
- forEach-loop
Syntax van een object
const koning = { naam: 'Willem-Alexander der Nederlanden', echtgenote: 'Máxima Zorreguieta', kinderen: ['Amalia', 'Alexia', 'Ariane'], geboortejaar: 1967, url: 'https://imgg.rgcdn.nl/162226349cc546fb9f908c4faaf8bf75/opener/Foto-NOS.jpg', noemKinderen() { let zin = 'Mijn kinderen zijn: '; for (let i=0; i<this.kinderen.length; i++) { zin += this.kinderen[i] + ' '; } return zin; } }
Voorbeeld van een object
Merk op:
- Object is een variabele:
koning
- Eigenschappen zijn:
- naam
- echtgenote
- kinderen
- geboortejaar
- url
noemKinderen()
is een method: een soort van functie in het object
Voorbeeld van een object
Doe nu zelf:
- Kopieer het object hiernaast en plak het in de console van een webbrowser
- Vraag in de console de eigenschappen op met de punt-notatie:
koning.echtgenote
koning.kinderen
- enz.... enz...
- Roep de method aan (vergeet de haakjes
()
niet) - Kun je ook in de console het oudste kind laten afdrukken?
Date-object
is een ingebouwd object in JavaScript-
heeft verscheidene methods om datum en tijd te berekenen
Date.parse('13 Jan 2021 15:30')
levert het aantal milliseconden op dat moment verstreken zijn vanaf 1 januari 1970:1610548200000
.
Oudere mensen hebben dus een negatieve JS-tijd: Theo is geboren op:-438570000000
-
metlet mijnTijd = new Date('1610548200000')
heb je een JS-Date-object, waar je allerlei methods op kunt loslaten om datum en tijden te berekenen:mijnTijd.getDay()
geeft de dag van de week als en cijfer tussen0
en6
mijnTijd.getDate()
geeft de dag van de maand (1-31
)mijnTijd.getFullYear()
geeft het jaarmijnTijd.getHours()
geeft het aantal uur (0-23
)- enz... enz...
arrow-functie =>
functie-notatie
arrow functie-notatie
() => {}
lussen met for en forEach()
Beide lussen (loops) doen hetzelfde.
opdracht
- Hiernaast een impressie van het resultaat
- Klik hier voor de data in een JS-object om mee te beginnen
- Vul dit aan met eigen bedachte data en doorloop de video's
- Resultaat online (op hosts.ma-cloud.nl)
- Linkje naar online versie in README.md
- GitHub-link inleveren in Teams
Volgende les: JSON data importeren