JavaScript 2.1 – Review

Op deze pagina lopen we nog even langs de essentials voor het gebruik van JavaScript met HTML en CSS. We oefenen met hoe we in JS de opmaak en inhoud van een pagina kunnen aanpassen, en maken een grid.

Allereerst start je natuurlijk een nieuw project volgens de checklist die we hier hebben gegeven: HTML Checklist

De stijl van de pagina aanpassen

Laten we nu de achtergrondkleur van de pagina in style.css aanpassen:
```
body {
    background-color: salmon;
}
```
Wanneer je index.html laadt zou nu de achtergrondkleur Salmon moeten zijn.
Nu gaan we JS gebruiken om de CSS-code die we zojuist hebben geschreven te wijzigen. Het doel hiervan is simpelweg om aan te tonen welke kracht JS heeft om wijzigingen aan onze webpagina’s aan te brengen.
Ga naar je lege script.js-bestand en voeg de volgende code toe:
```
var body = document.querySelector("body");

body.style.backgroundColor = "grey";
```
Let op 2 dingen:
1: de JS -code overschrijft nu de CSS -code waardoor onze pagina van salmon naar grijs verandert.
2: in CSS kan een element een – (streepje) gebruiken zoals in background-color, in JS gebruiken we geen streepje maar heeft elk woord na het eerste een hoofdletter: backgroundColor.

Als je geen pagina met een grijze achtergrond hebt, moet je controleren of je de juiste namen van de bestanden hebt en of ze correct zijn gelinkt in je index.html pagina.

Elementen toevoegen aan de pagina

Laten we wat elementen aan de HTML toevoegen en ze stijlen met CSS:
Voeg dit toe aan de body van je HTML pagina:

<div class="someBoxes" id="topBox">Boven</div>
<div class="someBoxes" id="midBox">Midden</div>
<div class="someBoxes" id="bottomBox">Onder</div>

En dit aan je style.css:

.someBoxes{
    width: 25vw;
    height: 25vh;
    background-color: white;
    margin: 10px;
}

Je zou nu drie witte vlakken moeten hebben op een grijze achtergrond.

We zullen nu js gebruiken om van het bovenste vak een knop te maken, die de achtergrondkleur van het onderste vak verandert.
Maak eerst de verbinding met de elementen in HTML door dit toe te voegen bovenaan script.js:
```
var topBox = document.querySelector("#topBox");
var midBox = document.querySelector("#midBox");
var bottomBox = document.querySelector("#bottomBox");
```
Hier maken we drie variabelen in js verbinden ze elk met een html id (let op de hashtags voor de id’s).
Voeg nu dit toe aan je script:
```
function changeBackground(){
    bottomBox.style.backgroundColor = "salmon";
}

topBox.onclick = changeBackground;
```
Eerst maken we een functie die we changeBackground noemen. Hier in zeggen we dat de achtergrondkleur van de onderste div moet veranderen naar ‘salmon’. Als we een functie maken, moeten we die functie ook ergens starten. In dit voorbeeld willen we dat de functie start als je op de bovenste div klikt.

Om een HTML element een JS functie te laten starten gebruiken we onclick, om te vertellen welke functie gestart moet worden na een klik, zoals hierboven te zien is.

Verandert de onderste div van kleur als je op de bovenste klikt?

Meer mogelijkheden om met JS de pagina aan te passen

Je kunt alle css-eigenschappen veranderen vanuit JavaScript. Hier zijn een paar voorbeelden, probeer je in je eigen pagina.
– Verander de kleur en grootte van het lettertype. tip: w3schools
– Verander de achtergrond met een afbeelding. tip: w3schools
– Verander de breedte en hoogte van een div. tip: w3schools
Ook de html-inhoud van een element kun je in JavaScript aanpassen.
– Verander de text in een div. tip: w3schools

w3schools.com is een geweldige hulp en we moedigen je aan om die site te doorzoeken als je twijfelt, het helpt ons om attributen en syntax te onthouden of zelfs nieuwe stijlen te vinden. Hier is een lijst met css-elementen die je kunt wijzigen in js die je kunt doorzoeken en gebruiken in je website.

Voeg nu een onclick functie toe aan #midBox in js

Kijk terug naar de vorige stappen om te zien hoe je een functie maakt en die via onclick koppelt aan een div.
Kies een aantal interessante eigenschappen om in JS aan te passen (bijv. lettergrootte / kleur, achtergrondkleur, innerHTML, afmeting enz.) en blijf deze toepassen op de bottomBox.
Op deze manier zou je twee knoppen moeten hebben die ieder de opmaak en inhoud van de onderste div op een andere manier aanpassen.

GRID review

We gebruiken grid om onze div-containers te ordenen in een sjabloon dat gemakkelijk te hergebruiken is over meerdere pagina’s. We zullen de bestaande pagina die je zojuist hebt gemaakt gebruiken om de basisprincipes van grid te bespreken.

Onze huidige pagina heeft 3 divs boven elkaar, we gaan een grid maken die ze op een specifieke plek zet:

De eerste stap is het plannen van ons grid op papier. Dit is het ‘design’ voor onze layout:
Nu kunnen we de layout in CSS maken. Er zijn maar 3 regels nodig om het grid te activeren en te definiëren. Voeg dit toe aan de body tag in CSS:
```
display:grid;
grid-template-columns: 33vw 33vw 33vw;
grid-template-rows: 33vh 33vh 33vh;
```
Als je de pagina opslaat zou je nu moeten zien dat de witte divs in een rij op je pagina staan. Als je niet definieert waar de divs moeten staan in je grid, gaan ze in de eerste beschikbare lege vakjes van je grid staan.

Om wél expliciet aan te geven waar de divs moeten staan, moeten we hun positie definiëren. Om dat te doen hebben we de lijnnummers nodig. Deze worden automatisch gemaakt wanneer je je grid definieert en zijn in ons geval als volgt:
Gebruik de id’s in CSS om je divs op de volgende posities te plaatsen:

De ‘midBox’ hebben we al voorgedaan:
```
#midBox{
    grid-column: 2/3;
    grid-row: 2/3;
}
```
Je zult zien dat de positie van de rijen en kolommen corresponderen met de lijnnummers van het grid (van 2 tot 3, etc.). Met deze nummers kun je de andere twee divs plaatsen zodat het met onze schets klopt.

Merk je nou dat je nog moeite hebt met de onderwerpen die in deze review voorbij kwamen? Ga dan niet door met de volgende les, maar ga eerst terug naar waar je nog meer mee wilt oefenen.

Bijvoorbeeld:
HTML: http://cmd.camp/html-tags-en-attributen/
CSS: http://cmd.camp/css-1-introductie/
Grid: http://cmd.camp/css-4-grid/
JavaScript: http://cmd.camp/javascript-1-de-eerste-stapjes/