Kop 1

JS object: kennismaken met properties en methods

In deze les gaan we het modaal venster opnieuw scripten.
Kopieer daarom de vorige training met het modaal venster.
Het script wordt nu beter gestructureerd.
Het oude script heeft veel globale variabelen en deze kunnen met andere scripts in jouw project onverwachte en ongewenste effecten veroorzaken.
Daarom wordt er in een goed script het aantal globale variabelen zoveel mogelijk beperkt.
We maken slechts één variabele: een object. Deze brengt in zijn methods de functies onder en in zijn properties de andere variabelen.

Leerdoelen

• voordelen van JS objecten;
• JS objecten;
• properties;
• methods;
• punt-notatie;
• this-keyword.

Onderstaande video's zijn een hulp om te zien hoe het kan werken.
Ze zijn niet bedoeld om precies na te doen.
Bedenk zoveel mogelijk eigen namen voor de classes, properties en methods.

Opdracht

1. Kopieer de hele opdracht van het modale venster in periode 3;
2. Verwijder het JavaScript;
3. Bouw deze opnieuw op met een object voor het modale venster.
4. Instructies in de video's hieronder. Ze zijn een hulp om te zien hoe het kan werken. Ze zijn niet bedoeld om precies na te doen.
   Gebruik zoveel mogelijk eigen namen voor de classes, properties en methods.

Bonusopdracht

Modaal venster met JS object 0: properties en method (00:03:48)

const koning = {
        naam: 'Willem-Alexander der Nederlanden',
        echtgenote: 'Máxima',
        kinderen: ['Amalia', 'Alexia', 'Ariane'],
        geboortejaar: 1967,
        noemKinderen() {
              let zin = 'Mijn kinderen zijn: ';
              for (let i=0; i<this.kinderen.length; i++) {
                    zin += this.kinderen[i] + ' ';
              }
              return zin;
        }
  }

Door in je script met objecten te werken krijg je een betere structuur. Je zorgt ervoor dat onderdelen in het script een eigen afgebakende werking hebben. We noemen dat de scope. In dit voorbeeld heeft de variable zin geen werking buiten het object koning en zelfs niet buiten de method noemKinderen(). Het is daarmee een locale variabele, die

• niet (toevallig) beïnvloed wordt door scripts buiten het object;
• niet per ongeluk invloed heeft op scripts buiten het object.

Het is een goede werkwijze het aantal globale variabelen in je script te beperken. Objecten zijn daar een goed instrument voor.

Variabelen, die niet binnen een codeblock staan, zijn globale variabelen. Ze zijn (soms te) eenvoudig te benaderen.
Variabelen, die wel in een codeblock worden gedeclareerd (gemaakt), noemen we lokale variabelen.

Modaal venster met JS object 1: achtergrond in object (00:08:37)

Het oude script wordt verwijderd.
Het bestaat uit teveel globale variabelen en bevat weinig structuur. Het script wordt verwijderd en we gaan een object maken met hierin al methods om een achtergrond te maken en het modaal (nu nog incompleet) te openen.
De property en de method worden aangeduid met het keyword this om aan te geven dat je een property of method van dit betreffende object wil hebben.
Met document.body.append(); wordt in de .open() method het element in de DOM geplaatst.
Controleer in jou console van de browser of dit al werkt.

Modaal venster met JS object 2: modaal- en sluiknop toevoegen (00:10:20)

We gaan op dezelfde manier als in de vorige video eerst method maakModaal() en maakSluitknop() maken.
De methods geven met .className ook een class-naam toe aan het element en bij de sluitknop kan met .innerHTML ook de unicode van het kruisje × worden toegevoegd.
Met .appendChild(); kan het element aan de DOM worden toegevoegd.

Modaal venster met JS object 3: modaal laten sluiten (00:08:02)

Voor het sluiten van het modaal wordt een method sluiten() geschreven.
Hier zijn 2 stappen van belang:

• verwijder de inhoud uit het modaal (zodat je met de volgende stap blanco begint). Dit kan door .innerHTML = '';
• haal de achtergrond uit de DOM: dat gaat met document.body.removeChild();

Vervolgens moeten we met .addEventListener(); deze method aanroepen bij een klik op de sluitknop. We gebruiken daarbij het keyword this om te verwijzen naar het object en daarbinnen de method aan te wijzen.
Dit kan op dezelfde manier met de achtergrond van het modaal.
Ook daar kan het klik-event op deze manier worden geplaatst.
Het gevolg is echter, dat ook een klik op het modaal tot sluiten leidt en er nu bij een klik op de sluitknop, zelfs een foutmelding optreedt. De klik wordt volgens het bubbling model immers doorgegeven aan de parents van het element waarop je klikt.
Dit kan worden voorkomen door ook een klik-event aan het modaal te koppelen, waarbij als actie event.stopPropagation(); wordt gegeven. Deze zegt dat het event niet moet worden doorgegeven aan de parent-elementen. De bubbling wordt gestopt.

Modaal venster met JS object 4: inhoud verwijderen (00:05:23)

De inhoud, die voor de modale vensters bedoeld is, staat nog steeds in de weg.
We maken in het object een property aan, die alle elementen bevat, die nog in de body staan, maar pas getoond moeten worden in het modaal, als de passende knop geklikt wordt.
Het is een property, die gemakkelijk gevuld kan worden, door deze toe te kennen aan document.querySelectorAll(); met de class-selector als argument.

Buiten ons object kan deze node-list worden aangeroepen met de punt-notatie van het object.
Via een for-lus wordt elk element verwijderd uit de DOM met element.parentNode.removeChild(element);

Modaal venster met JS object 5: knoppen activeren (00:07:55)

We voegen op dezelfde manier als hierboven weer een property toe aan ons object.
Nu een property die alle knoppen bevat, die het modale venster kunnen openen.
Het doel is om met een klik het modaal te openen, met de juiste inhoud. Eerst maar het modaal laten openen.
Buiten ons object gaan we weer met een for-lus door alle knoppen heen.
We gebruiken de punt-notatie bij objecten: object.property en object.method().
We roepen hem aan met de punt-notatie en geven elke knop een event-listener, die met de punt-notatie de method .open() uit het object aanroept.
Controleer hierna of elke knop dit ook doet.

Daarna moet de juiste inhoud erin.
Maak daarvoor in de for-loop een variabele, die (met de punt-notatie) de inhoud van het gelijkluidende element uit de node-list van inhouden haalt.
Geef dit node-element vervolgens als argument mee in de object.open()-method.

In het object wordt de method .open() voorzien van een parameter element.
Als deze met appendChild() aan het modaal is toegevoegd, werkt het modale venster zoals het de bedoeling is!!
Kijk nog eens terug hoe het JavaScript is gestructureerd. Het object heeft het zelfs mogelijk gemaakt een array te moeten maken en er is nu slechts één globale variabele!!

Inleveren

• Na afloop plaats je deze training online in je bewijzenmap;
• Valideer jouw pagina's op Markup Validation Service van W3C.
• De validatie icoontjes plaats je in de footer.
  Code vind je bij https://github.com/Theo-denBlanken/validatie-W3C;
• Plaats jouw code op in een aparte repository op GitHub en plaats jouw uitwerking online;
• Maak in jouw GitHub-repo een README.md met daarin tenminste een link naar jouw online uitwerking.
• Plaats de GitHub-link in ELO Magister bij de FRO md1 Modaal venster met JS object.