Terug

JavaScript 2 – Meer interactie

In deze les herhalen we wat we in les 1 geleerd hebben. Daarna introduceren we wat nieuwe kennis.

Cheatsheet

Koppelen

Als je met JavaScript aan de slag gaat, moet je niet vergeten het HTML bestand aan het JS bestand te koppelen, als laatste regel in de body.

Bekijk ook de HTML, CSS en JS Checklist.

Variabelen

Variabelen zijn de kern van je script. Hier kun je vanalles in opslaan, zoals tekst, getallen, of een verwijzing naar een id van een element.

var mijnTekst = "Donald Duck";
var mijnGetal = 3.14;
var mijnElement = document.querySelector("#mijnID");

Elementen aanpassen

Als je een verwijzing naar een element hebt gemaakt, kun je vanuit JavaScript dat element aanpassen. Bijvoorbeeld de inhoud:

mijnElement.innerHTML = "Mickey Mouse";

Of de opmaak:

mijnElement.style.backgroundColor = "green";
mijnElement.style.height = "300px";
mijnElement.style.backgroundImage = "url('img/kat.jpg')";

Als het element een <img> is kun je ook de src aanpassen:

mijnElement.src = "img/hond.jpg";

If-statements

Met een if-statement kun je inhoud of opmaak dynamisch maken:

var antwoord = prompt("Is het dag of nacht?");

if (antwoord == "dag") {
  mijnElement.style.backgroundColor = "yellow";
} else {
  mijnElement.style.backgroundColor = "DarkBlue";
}

Functies

Als code op een bepaald moment uitgevoerd moet worden, bijvoorbeeld bij een muisklik, dan heb je een functie nodig. Vergeet niet om aan te geven wanneer de functie gestart moet worden, bijvoorbeeld met onclick.

var plaatje = document.querySelector("#plaatje");

function quiz() {
  var naam = prompt("Wie is deze pokemon?");

  if (naam == "pikachu") {
    plaatje.src = "goed.jpg";
  }
}

plaatje.onclick = quiz;

Nieuw project

  1. We maken voor deze les een nieuwe projectmap, volgens de HTML, CSS en JS Checklist. Als je deze stap wilt overslaan kun je ook dit zip-bestandje downloaden en uitpakken in een nieuwe map.

De Console

Om een beter beeld te krijgen van wat er achter de schermen van een website gebeurt, zijn in alle moderne browsers tools voor developers ingebouwd. Misschien heb je tijdens het maken van je HTML en CSS website al eens gebruik gemaakt van de Inspector. Voor JavaScript maken we veel gebruik van de Console.

  1. Start de Live Server in je projectmap. In Chrome druk je op Ctrl Shift J (op Windows) of Ctrl Option J (op Mac) om de console te openen.

  2. Plak onderstaande code in script.js en sla op. In de console zou je nu “Hello World!” moeten zien. Zie je dat niet? Controleer dan of het HTML bestand wel goed aan het JS bestand is gekoppeld.

    console.log("Hello World!");
    

    Het resultaat:

    Wat zie je verder in de console? Die tweede regel geeft aan dat de Live Server werkt, heel fijn natuurlijk. Die laatste regel is eigenlijk een foutmelding, maar niet een belangrijke; Je krijgt deze foutmelding omdat je geen favicon hebt. Dit is niet erg, maar als je van die vervelende foutmelding afwilt kun je een favicon maken voor je site. De gelinkte site legt uit hoe.

  3. We gaan even opzettelijk een fout maken in onze JavaScript code, om te kijken hoe de console reageert:

    console.log(mijnGetal);
    

    In deze code weet Chrome natuurlijk niet wat je met ‘mijnGetal’ bedoelt. We hebben die variabele namelijk nog niet gedefinieerd. Dat zie je in de console ook staan:

    De foutmelding vertelt je inderdaad dat mijnGetal is not defined. Maar het vertelt je ook dat de fout is gevonden op regel 1 van script.js. Doordat de console de foutmeldingen weergeeft die je normaal niet ziet, is deze heel handig om problemen op te sporen.

  4. Als je de variabele aanmaakt, zul je zien dat we met een console.log de inhoud van die variabele kunnen zien:

    var mijnGetal = 3.14;
    console.log(mijnGetal);
    

    Meer weten over hoe je de console effectief gebruikt? Kijk op JavaScript Troubleshooting

Meer dynamische content

In de vorige les heb je al geleerd hoe je aan de hand van een knop de pagina kunt laten veranderen. In deze opdracht gaan we daar verder mee aan de slag.

  1. Maak in de body van je HTML pagina een div element. Geef de div een id en gebruik die id om het element in CSS een hoogte en breedte van 100px en een rode achtergrondkleur te geven. Controleer in de browser of je die div ziet.

  2. Maak in de body ook twee knoppen. Hoe? Je kunt dat op meerdere manieren doen. Je kunt bijvoorbeeld nog twee divs maken, of twee afbeeldingen, of twee <button> elementen. Die keuze is aan jou.

    Tip: geef de knoppen de CSS-eigenschap cursor: pointer; zodat de muisaanwijzer een ‘handje’ wordt op desktop-browsers.

  3. Zorg dat elk element een duidelijke id heeft.
    Gebruik in JavaScript document.querySelector om een verwijzing naar de id’s van de twee knoppen en de div op te slaan in een variabele.
    Let op: noem de knoppen niet lichtAan en lichtUit, want die namen gebruiken we hieronder al.

  4. Maak nu in JavaScript twee functies. De ene noem je lichtAan(), de andere lichtUit().
    In de lichtAan functie maak je de achtergrondkleur van de div die je hierboven hebt gemaakt geel.
    In de lichtUit functie maak je de achtergrondkleur van de div die je hierboven hebt gemaakt donkerblauw.
  5. Geef in JavaScript met onclick aan dat de ene knop de lichtAan functie moet starten, en met lichtUit de andere.

  6. Maak onder je knoppen een range slider. Geef het mijnSlider als id. Stel de minimale waarde in op 100, en de maximale waarde op 500.

  7. We gaan zorgen dat op het moment dat je de slider verandert, een functie wordt gestart, en dat in die functie de waarde van die slider wordt uitgelezen naar de console. Kopieer deze code, en pas de id aan zodat deze verwijst naar de slider:

    var mijnSlider = document.querySelector("#mijnSlider");
    
    function leesSlider() {
      var sliderWaarde = mijnSlider.value;
      console.log(sliderWaarde);
    }
    
    mijnSlider.onchange = leesSlider;
    

    Controleer in de console of je de waarde ziet veranderen als je de slider verschuift. Let op: de waarde verandert pas als je de slider loslaat.
    Lees bovenstaande code zorgvuldig door, verzeker je ervan dat je elke zin écht snapt. Ga daarna pas door naar de volgende stap.

  8. In de variabele sliderWaarde hebben we de waarde van de slider opgeslagen. Die kunnen we vervolgens gebruiken om de breedte van de div uit stap 1 aan te passen. Plak deze code in de functie leesSlider en pas de naam aan:

    naamVanJeDiv.style.width = sliderWaarde + "px";
    

    Zie je de breedte van de div veranderen?

    Tip: Als je transition: 1s; aan de CSS van de div toevoegt, verloopt de transitie geleidelijk over 1 seconde.

Timing

Soms wil je in JavaScript dat iets automatisch gebeurt, na een bepaalde tijd. Hier heb je twee opdrachten voor: setTimeout en setInterval. Het verschil tussen die twee leggen we hieronder uit aan de hand van opdrachtjes.

  1. setTimeout

    setTimeout is als een kookwekker; je stelt een tijd in, en als die tijd verlopen is, wordt een functie gestart. Als we van onze lichtshakelaar een tijdschakelaar willen maken, doen we dat als volgt:

    Zoek in je code de lichtAan() functie. Voeg deze regel als laatste toe in die functie:

    setTimeout(lichtUit, 2000);
    

    Met bovenstaande code zeggen we eigenlijk: start over 2000 milliseconden (2 seconden) de functie lichtUit. Handig als je iets met vertraging wilt doen!

  2. setInterval

    setInterval werkt als een klok; je stelt een interval in, en elke keer na een aantal milliseconden wordt dezelfde functie uitgevoerd.

    Als voorbeeld gaan we een klok toevoegen aan de pagina.
    Maak in HTML een nieuwe div, geef die als id “klok”.

    <div id="klok"></div>
    

    Maak in JavaScript een verwijzing naar die id:

    var klok = document.querySelector("#klok");
    

    Nu maken we een functie die de datum en tijd opslaat in een variabele en die vervolgens laat zien met innerHTML:

    function tickTock() {
      var datumEnTijd = new Date().toLocaleString();
      klok.innerHTML = "Het is nu " + datumEnTijd;
    }
    

    Als laatste gebruiken we setInterval om aan te geven dat deze functie elke 1000 milliseconden (1 seconde) gestart moet worden:

    setInterval(tickTock, 1000);
    

    In de volgende les gaan we setInterval weer gebruiken, als de ‘motor’ van ons script.

Extra voor gevorderden

Nog een leuke tip: in bovenstaande voorbeelden hebben we al een achtergrondkleur aangepast met een if-statement. Maar je kunt ook rechtstreeks een getal gebruiken om de HSL-waarde van een kleur aan te passen. In dit voorbeeld hebben we de range aangepast zodat de minimale en maximale ‘hue’ waarde tussen de 0 (rood) en 100 (groen) liggen. Vervolgens voegen we aan de functie leesSlider() toe:

<input type="range" id="mijnSlider" min="0" max="100" />
myDiv.style.backgroundColor = "hsl(" + sliderWaarde + ",100%,50%)";