Eigenschappen van objecten

maken het tot krachtige variabelen

Naar de slides

Leerdoelen

  • Eigenschappen van JS-objecten
  • Uitvoeren naar DOM
  • JS Date-object met methods
  • Arrow-functies
  • forEach-loop
object met eigenschappen
Objecten hebben eigenschappen

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:
  1. Object is een variabele: koning
  2. Eigenschappen zijn:
    • naam
    • echtgenote
    • kinderen
    • geboortejaar
    • url
  3. noemKinderen() is een method: een soort van functie in het object

Voorbeeld van een object

Doe nu zelf:
  1. Kopieer het object hiernaast en plak het in de console van een webbrowser
  2. Vraag in de console de eigenschappen op met de punt-notatie:
    1. koning.echtgenote
    2. koning.kinderen
    3. enz.... enz...
  3. Roep de method aan (vergeet de haakjes () niet)
  4. Kun je ook in de console het oudste kind laten afdrukken?

Date-object


  1. is een ingebouwd object in JavaScript

  2. heeft verscheidene methods om datum en tijd te berekenen

  3. 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

  4. met let mijnTijd = new Date('1610548200000') heb je een JS-Date-object, waar je allerlei methods op kunt loslaten om datum en tijden te berekenen:
    1. mijnTijd.getDay() geeft de dag van de week als en cijfer tussen 0 en 6
    2. mijnTijd.getDate() geeft de dag van de maand ( 1-31 )
    3. mijnTijd.getFullYear() geeft het jaar
    4. mijnTijd.getHours() geeft het aantal uur ( 0-23 )
    5. enz... enz...

meer info

arrow-functie =>

functie-notatie

arrow functie-notatie
() => {}

lussen met for en forEach()

Beide lussen (loops) doen hetzelfde.

forEach()-loop

for-loop

Meer info...

opdracht


Volgende les: JSON data importeren