In dit project wordt veel met data gewerkt. In deze reeks leer je hoe data vanuit een JavaScript-object in een HTML-document worden geplaatst.
Broncode: https://gist.github.com/Theo-denBlanken/1493b067a87db6709dbc20b49b99378a
Het resultaat is een pagina met een overzicht van gegevens van een huis.
Je ziet de tijd, de buitentemperatuur, de binnentemperatuur, de ingestelde temperatuur, of de verwarming, de kamerverlichting en de buitenverlichting aan of uit staat.
Als je de markup bekijkt, blijkt dat er helemaal geen data in staan.
Deze worden door JavaScript uit een reeks objecten gehaald.
Die objecten staan in een apart JavaScript-bestand. Het is een array van objecten.
Elk object heeft eigenschappen (properties). En dat zijn de gegevens, die we gebruiken voor het getoonde overzicht.
We beginnen deze oefening vanaf scratch.
Er wordt een div aangemaakt met een id.
Er wordt een script gekoppeld.
In dat script wordt die div in een variabele gestopt. Dan kun je met .innerHTML daar inhoud in schrijven.
Er wordt een arrow functie geschreven. Wellicht een andere notatie dan je tot nu toe gewend bent, maar je mag dit zeker ook doen in de notatie, die je wel kent.
Omdat er ook een script met data geladen moet worden, wordt er een starten-functie gemaakt, die pas uitgevoerd wordt nadat alle content in de DOM is geladen. Nu staat daar alleen de uitvoeren-functie in, maar later zal ook de data uit een apart script in een variabele gestopt worden.
Met het event DOMContentLoaded wordt deze start-functie aangeroepen.
Dan wordt de uitvoer dus door het script gedaan.
In deze stap gaat het om data. In de toekomst halen we die van internet, maar in deze training plaatsen we de data hardcoded in het script. We maken een nieuw JavaScript bestand en plaatsen daar de raw-code van
https://gist.github.com/Theo-denBlanken/1493b067a87db6709dbc20b49b99378a
Om de dat wat beter in de vingers te krijgen voegen we minimaal 5 elkaar opvolgende tijdstippen in.
De datum is een JavaScript-tijd, zodat we later het script kunnen laten uitrekenen op welke dag van de week die data waren. Dat voeren we dus niet zelf in. We laten ook het script bepalen of de verwarmingsketel aan staat of uit staat.
Eerst wordt het script met de data aan het document gekoppeld.
Je kun dan al in de console de array met objecten opvragen.
In ons script dat uitvoert, wordt deze in de variabele dataObject gestopt.
We kunnen dan van elk item uit die array een eigenschap uitvoeren.
Als voorbeeld wordt hier van het eerste item de tijd opgevraagd en uitgevoerd. Om de waarde van een eigenschap uit het object op te vragen gebruiken we dan de punt-notatie:
dataObject[0].tijd
.
Om van het tweede object de buitentemperatuur te krijgen: dataObject[1].tempBuiten.
Voor de uitvoer maken we ook gebruik van de handige string-literals uit JavaScript. Ze worden omgeven met de back-ticks ``. Je kunt dat eenvoudig (zelfs meerdere regels) als string aangeven doorspekt met variabele-waarden die omgeven zijn met ${}.
Het is al een goed stukje werkend, dus ju kunt al een commit maken op GitHub.
Ik beveel je hier aan om dat in een aparte repository te doen.
We gaan nu van elk object iets uitvoeren.
Maak daarvoor in de uitvoer-functie een variabele die een html-string is.
Als je met een loop door de array gaat, voeg je telkens iets aan die string toe: en wel de inhoud van een van de properties van elk object.
Op het eind van het doorlopen van de array is die string dus heel groot geworden en voeg je hem met .innerHTML toe aan de inhoud van de uitvoer-div.
Het doorlopen van de array kan met een for-lus, maar hier gebruiken we de .forEach)()- methode met daarin de arrow-schrijfwijze.
let html ="";
dataObject.forEach( obj => {
html += `<div class="rij">`;
html+= `<div>${obj.tijd} </div>`;
html+= `<div>${obj.tempBuiten} </div>`;
html += "</div>";
});
uitvoer.innerHTML = html;
Er wordt voor elk object een div-element gemaakt, met daarin voor elke eigenschap tijd een div en elke eigenschap tempBuiten een div.
De tijd is op dit moment een getal en stelt de tijd in milliseconden voor die verstreken zijn sinds 1 januari 1970.
Dit is een zogenaamde JavaScript-tijd. We willen natuurlijk de dag van de week, de en de datum en die zijn hieruit af te leiden.
We maken een aparte functie, die dit getal als parameter heeft en die daar vervolgens een string van maakt met de datum.
In deze functie maken we een variabele aan van het type Date.
Dit is een JavaScript object, die een aantal methods heeft.
Zie: https://www.w3schools.com/jsref/jsref_obj_date.asp.
Elke method geeft een getal terug.
Bijvoorbeeld getDate() geeft een getal tussen 1 en 31 terug, die de dag van de maand van de datum-variabele is. Maar ook getMonth() die een getal tussen 0 en 11 geeft, die staat voor januari tot en met december en getDay() die de dag van de week oplevert.
We maken ook gebruik van getFullYear(), getHours() en getMinutes().
De method bij de getDay()-method geeft een getal tussen 0 en 6. De gebruiker heeft meer aan de naam van de dag van de week.
We kunnen die nu in onze eigen gewenste taal omzetten.
Daarvoor maken we een eigen functie. Feitelijk werken we met een samenstelling van verschillende conditionals en we kunnen dat overzichtelijke scripten met de switch-opdracht. Deze heeft het getal als argument en afhankelijk van de waarde daarvan wordt er een case geschreven, die uitgevoerd wordt. Na zo een opdracht hoeft de switch niet verder meer doorgelopen te worden. (het is zelfs niet wenselijk) en daarom geef telkens de break-opdracht. De switch wordt dan verlaten.
Voldoet geen enkele case aan de voorwaarde, dan wordt de default-opdracht uitgevoerd.
Na het maken van de functie, voeg je hem toe aan de uitvoer-functie en is de dag van de week te zien.
Als je de vorige video begrijpt, kun je dat ook uitvoeren voor het omzetten van het maandnummer uit getMonth() naar een naam van de maand.
Het werkt immers op dezelfde manier met de JavaScript switch-opdracht.
Tijd wordt herkenbaar als je uren en minuten steeds met 2 cijfers weergeeft met : ertussen. Dit gebeurd niet als dat aantal minder is dan 10. We maken dus een conditional die onderzoekt of de uren minder is dan 10. Is dat het geval, dan plaats je er de string '0' voor.
Idem voor de minuten.
De temperatuur wordt ook herkenbaar als de eenheid graden Celsius wordt toegevoegd. Dat kleine graden-rondje met °ree;.
We voegen nog twee temperaturen toe uit de eigenschappen van onze objecten.
Je kunt ook de gegevens uitvoeren met plaatjes.
Op https://gist.github.com/Theo-denBlanken/57130d4c7596170e462eb0193da288d4 staan 4 svg's, die je in je project opneemt.
Voor de afbeeldingen maken we een stijl aan, die ervoor zorgt dat de afbeelding klein blijft.
Je kunt object-eigenschappen vergelijken in een conditional en afhankelijk van het resultaat een keuze maken welke afbeelding je wilt toevoegen. In een if-statement vergelijken we de gewenste temperatuur en de binnentemperatuur van het object.
De data binnen een rij worden naast elkaar geplaatst.
Dat kan heel snel met display: flex.
Geef de div's daarbinnen wat padding en er ontstaan al leuke rijen, zeker als je de oneven rijen een wat andere achtergrondkleur geeft.
De data binnen een div kunnen ook verticaal uitgelijnd worden door ze zelf display flex te geven en ze met align-items: center; ze verticaal te centreren.
Een tabel moet worden voorzien van een kop. We voegen hardcoded een tabelkop toe.
Nu blijkt dat degene, die dit niet met div's maar met een tabel hebben uitgevoerd, duidelijk in het voordeel zijn. Want als ook deze kop met display: flex; naast elkaar staan, dat de kop niet uitgelijnd met de data. Door toevoegen van paddings en een enkel element nog een extra class kan dit op het oog worden geoptimaliseerd.