Javascript deel 2 – Style, html en functies

De praktijk

In de eerste JavaScript les heb je theorie geleerd over variabelen en if-statements. In deze les gaan we die theorie in de praktijk brengen door zelf JavaScript te schrijven.

Voordat we beginnen maak je een nieuwe projectmap, met een HTML, CSS en JS bestand. Volg de checklist op https://cmd.camp/html-css-en-js-checklist/ om je project te starten.

Let op: Zorg dat de koppeling met het js bestand altijd als laatste regel in je body (dus vlak voor de </body> tag) blijft staan. Anders heb je kans dat je JavaScript niet werkt.

Wie is het?

Wij gebruiken JavaScript meestal om bestaande HTML-elementen op de pagina aan te passen. In de volgende paragrafen zul je zien hoe we met JS de inhoud of de opmaak van een element veranderen.

Omdat we een bestaand HTML element op de pagina willen gaan aanpassen, moeten we JavaScript eerst vertellen welk element we willen aanpassen. De code die hiervoor gebruikt wordt is document.querySelector( ). Query betekent vraag: we vragen aan het document om een selectie te doen op basis van wat we tussen de haakjes ( ) zetten.

In CSS heb je geleerd dat een id wordt aangeduid met een #. Ditzelfde geldt ook in JS. Het document gaat bijvoorbeeld op zoek naar het element met id “blokje”. Als dat element gevonden wordt, kunnen we opmaak etc. gaan aanpassen. Maar als we voor elke aanpassing steeds opnieuw een querySelector uit moesten voeren, zou de code nogal herhalend worden. Daarom slaan we het gevonden element op in een variabele.

Maak in je HTML bestand een div met id “blokje”. Zet in die div de tekst “Hello World”. Geef in CSS diezelfde div, door middel van z’n id, een achtergrondkleur, een lettertype en een padding. Controleer in je browser of dit gelukt is.
Maak in javascript een verwijzing naar dit element, door dit in script.js te plakken:
```
let blokje = document.querySelector("#blokje")
```

Wat betekent bovenstaande code? Met let blokje maken we een variabele aan die blokje heet. Met document.querySelector gaan we in het document (de webpagina) op zoek naar "#blokje", oftewel een element met id “blokje”. Een verwijzing naar dat element wordt opgeslagen in de variabele.

Style

Nu javascript weet welk element je bedoelt omdat je een verwijzing hebt gemaakt, kun je die verwijzing gebruiken om eigenschappen van het blokje aan te passen. Je kunt in JS iedere CSS eigenschap aanpassen, zie deze lijst voor hoe de eigenschappen in JS heten.

Pas bovenstaande code aan. Controleer in de browser of je blokje geel wordt.
```
blokje.style.backgroundColor = "yellow";
```

Wordt je blokje niet geel? Controleer dan eerst of je geen typfouten hebt gemaakt. Controleer ook of je html bestand wel aan je script bestand is gelinkt, zoals beschreven op https://cmd.camp/html-css-en-js-checklist/.

Wat zien we in bovenstaande code gebeuren? We zien dat we de style van een element kunnen aanpassen in JavaScript. In dit geval doen we dat met de backgroundColor, maar je kunt in principe elke CSS eigenschap op die manier aanpassen. Let er alleen op dat als een eigenschap in CSS geschreven wordt met een streepje, je die in JS aan elkaar schrijft met een hoofdletter. background-color in CSS wordt dus backgroundColor in JS. font-family in CSS wordt dus fontFamily in JS. Op deze pagina vind je een lijst van de meest gebruikte eigenschappen, en hoe ze in CSS en JS heten.

Op dezelfde manier kunnen we ook het lettertype van het blokje aanpassen.
```
blokje.style.fontFamily = "Comic Sans MS";
```
Probeer nog een aantal CSS-eigenschappen van het blokje door middel van JS aan te passen. Denk bijvoorbeeld aan border, font-weight, margin, etc.

innerHTML

Naast de opmaak van een element, kun je in JS ook de inhoud (de HTML) in een element aanpassen. Plak dit onderaan je code:
```
blokje.innerHTML = "Dit is tekst!";
```
innerHTML past dus de HTML in een element aan.
In plaats van rechtstreeks de tekst te typen, kunnen we ook de inhoud van een variabele gebruiken. Dat wordt later handig. Pas je code aan:
```
let tekst = "Dit is tekst!";
blokje.innerHTML = tekst;
```
Als er al tekst in het element staat kun je ook nog meer tekst toevoegen met +=
```
blokje.innerHTML = "Dit is";
blokje.innerHTML += " tekst!";
```

Event functies

Tot nu toe hebben we alle JavaScript code gewoon los in ons js bestand geschreven. Het gevolg is dat alle code meteen wordt uitgevoerd als de pagina geladen wordt. Tot nu toe was dat geen probleem, maar soms wil je liever dat code pas op een bepaald moment wordt uitgevoerd. Bijvoorbeeld als de gebruiker op een knop klikt, een formulier heeft ingevuld, of als een timer afloopt.

Code die op een bepaald moment moet worden uitgevoerd, stop je in een functie:

function zegHallo() {
    blokje.innerHTML = "Hallo!";
    blokje.style.backgroundColor = "tomato";
}

Zoals je ziet maak je een functie met het woord function. Daarna verzin je zelf een naam gevolgd door (). De code in de functie staat in een codeblok aangegeven met {}, net als bij een if-statement.

Plak bovenstaande code onderaan je JS bestand. Als je nu je pagina herlaadt zul je zien dat de innerHTML van blokje niet Hallo! wordt. Dat komt doordat functies niet automatisch worden uitgevoerd. Jíj moet aangeven wanneer dat gebeurt.
Maak in HTML en CSS een knop.
Hoe? Je kunt dat op meerdere manieren doen. Je kunt bijvoorbeeld:
• een <div> of een <a> maken en die er met CSS uit laten zien als een knop
KNOP

• een <img> gebruiken

• een <button> element maken en eventueel opmaken met CSS

Die keuze is aan jou.

Tip: geef de knop de CSS-eigenschap cursor: pointer; zodat de muisaanwijzer een ‘handje’ wordt.
Geef je knop de id “knop”.
Gebruik in JavaScript document.querySelector om een verwijzing te maken naar de id van de knop op te slaan in een variabele. Doe dit altijd bovenaan je JS bestand.
Als je alles goed hebt gedaan kun je met de volgende code aangeven dat als je op de knop klikt, de zegHallo() functie gestart moet worden. Plak deze code buiten de functie.
```
knop.onclick = zegHallo;
```
Met onclick geven we dus aan welke functie gestart moet worden als de gebruiker op het element klikt.

Form values

Maak een nieuw HTML en JS bestand in je projectmap, koppel HTML aan CSS en aan het nieuwe JS bestand.

Iets waar JavaScript ook heel vaak voor gebruikt wordt, is het uitlezen van formulierelementen, zoals tekstinputs, checkboxes en datumselecties. Heb je nog niet gewerkt met formulierelementen? Neem dan eerst even een kijkje op deze pagina.

Maak in je nieuwe HTML bestand een h1 met id “welkomTitel”. Zet daar de tekst “Welkom” in.
Maak ook een input-element van het type “text”. Geef het de id “naam”.
Maak een input-element van het type “button”. Geef het de id “knop” en de value “Klik hier!”
Maak in je nieuwe JS bestand een verwijzing met document.querySelector naar alledrie de elementen. Noem elke variabele het zelfde als de id.
We maken nu een functie, genaamd toonWelkom. In die functie geven we aan dat in het welkomTitel de naam moet worden getoond die in het tekstveld is ingevuld:
```
function leesInput() {
    welkomTitel.innerHTML += naam.value;
}

knop.onclick = leesInput;
```
Je ziet hier dat .value de waarde uit een input-veld haalt. Die waarde wordt vervolgens toegevoegd aan de h1.
Test de code door je naam in het tekstveld in te vullen en op de knop te klikken. Je zou nu je naam in de titel moeten zien. Er mist wel een spatie, kun je die zelf aan de code toevoegen?

onchange

In plaats van onclick kun je bij formulierelementen ook gebruik maken van oninput, die een functie start elke keer als je de waarde verandert.

Plak deze code in je HTML en JS. Lees de code goed door om zeker te weten dat je begrijpt wat er gebeurt:
HTML

<input type="range" min="0" max="100" id="slider">
<div id="sliderWaarde">0</div>

let slider = document.querySelector("#slider");
let sliderWaarde = document.querySelector("#sliderWaarde");

function toonWaarde() {
    sliderWaarde.innerHTML = slider.value;
}
slider.oninput = toonWaarde;

Praktische voorbeelden

Bekijk de video’s waarin we praktische voorbeelden van het gebruik van JS laten zien, en gebruik ze waar nodig in je eigen project.