Terug

JavaScript 1 – De eerste stapjes


De eerste stapjes in een nieuwe taal zijn altijd moeilijk. Deze pagina introduceert een aantal van de belangrijkste concepten die horen bij JavaScript, maar die ook van toepassing zijn op elke moderne programmeertaal.

Waarom JavaScript?

JavaScript bestaat al een tijdje, zelfs langer dan CSS. De taal bestaat vooral om interactiviteit toe te voegen aan je webpagina: HTML is voor inhoud, CSS voor opmaak, en JS voor vrijwel al het andere.

JavaScript hoort bij CSS en HTML. Je zult zien dat een aantal concepten die we al kennen, zoals id’s, stijl en elementen, ook weer terug komen.

  1. Je volgt deze les door de video te bekijken, deze inhoud staat ook als stappenplan hieronder uitgewerkt. Onderaan deze pagina vind je nog twee zelfstudieopdrachten. Nadat je beide opdrachten hebt gedaan kun je door naar les 2.

Het project maken

  1. Voor elke site heb je minstens een map met een HTML, CSS en JS bestand nodig. Volg de checklist op https://cmd.camp/html-css-en-js-checklist/ om je project te starten.

Wie is het?

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 dus 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.

  1. Maak in je HTML bestand, in de body een div met de 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.

  2. Maak in javascript een verwijzing naar dit element, door dit in script.js te plakken:

    document.querySelector("#blokje")
    

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.

  1. Pas bovenstaande code aan. Controleer in de browser of je blokje geel wordt.
    document.querySelector("#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.

  1. Op dezelfde manier kunnen we ook het lettertype van het blokje aanpassen.
    document.querySelector("#blokje").style.fontFamily = "Comic Sans MS";
    

Variabele

Je kunt een variabele zien als een schoenendoos. Je kunt er iets in stoppen, je kunt later bekijken wat er in zit, en als je het niet meer nodig hebt kun je het er uit halen en er iets anders in stoppen. Voor alles wat in het programma onthouden moet worden, gebruik je een variabele.

// Een variabele maken
var mijnElement;

// Het element met id blokje opslaan in de variabele
mijnElement = document.querySelector("#blokje");

In het bovenstaande voorbeeld zie je dat we een variabele maken, genaamd ‘blokje’. Dat betekent dat JS nu weet dat er een plekje moet zijn voor jou om dingen op te slaan, en dat we dat plekje ‘blokje’ noemen. Vervolgens zeggen we tegen JS dat we op zoek gaan naar een element met id blokje, en dat die opgeslagen moet worden in de variabele.

Een variabele met een naam en een element met dezelfde naam als id zijn dus twee verschillende dingen, totdat jij zegt dat de één naar de ander moet verwijzen.

In het eerste voorbeeld zie je dat het bovenstaande ook in één zin gedaan kan worden, als volgt:

var mijnElement = document.querySelector("#blokje");
  1. We passen de code die we eerder gemaakt hebben aan, zodat we eerst een verwijzing opslaan in een variabele, en daarna die verwijzing gebruiken om het element aan te passen:
    var mijnElement = document.querySelector("#blokje");
    
    mijnElement.style.backgroundColor = "yellow";
    mijnElement.style.fontFamily = "Comic Sans MS";
    

innerHTML

  1. Naast de opmaak van een element, kun je in JS ook de inhoud (de HTML) in een element aanpassen. Plak dit onderaan je code:
    mijnElement.innerHTML = "Dit is tekst!";
    

    `innerHTML` past dus de HTML **in** een element aan.

Prompt

Een prompt zul je op een goede website niet zo snel tegenkomen, maar het is wel de makkelijkste manier om interactiviteit te testen. Probeer het maar eens.

  1. Plak dit onderaan je code:
    var antwoord = prompt("Wat is jouw naam?");
    mijnElement.innerHTML = antwoord;
    

In bovenstaand voorbeeld wordt het antwoord op de prompt opgeslagen in een variabele, genaamd antwoord. De inhoud van die variabele wordt in mijnElement getoond.

  1. Kun jij nou de code zo aanpassen dat je met de prompt niet de inhoud van het element aanpast, maar de achtergrondkleur? Mocht je er niet uit komen, dan kun je in het filmpje het antwoord opzoeken.

if

Programmeren wil vaak zeggen dat je bezig bent met het schrijven van if-this-then-that: ‘als dit waar is, dan moet dat gebeuren’. In JavaScript doe je dat met een if.

Elke if heeft een conditie (wat moet er waar zijn?) en een codeblok (wat moet er dan gebeuren?). De conditie staat tussen haakjes () en het codeblok tussen accolades {}.

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

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

Je kunt ook een else statement toevoegen, voor als de conditie niet waar is.

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

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

Quizje

Download quiz.zip en bekijk de bestanden. Als je het script bekijkt, snap je dan wat er gebeurt?

index.html

<img src="vraag.jpg" id="plaatje">

script.js

var plaatje = document.querySelector("#plaatje");
var naam = prompt("Wie is deze pokemon?");

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

Let op: Als je in een if-statement wilt vergelijken of twee dingen gelijk aan elkaar zijn, dan doe je dat met dubbele is-tekens:
if (naam == "pikachu")
Niet vergeten!

Het nadeel aan deze code is dat het gelijk wordt uitgevoerd. Je krijgt de prompt al voordat “vraag.jpg” geladen is, en ziet dus alleen “goed.jpg”. Eigenlijk willen we dat JavaScript dus even wacht met het uitvoeren van de code. Hiervoor hebben we een function nodig.

function

Een functie heeft ook een codeblok (een stuk code tussen accolades). Je kunt een functie zien als een verzameling opdrachten die samen op een bepaald moment worden uitgevoerd. In onderstaand voorbeeld maken we een functie genaamd ‘quiz’, en zetten daar de meeste code van de quiz in. Daarna zeggen we door middel van een onclick eigenschap dat bij een muisklik die functie gestart moet worden.

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

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

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

plaatje.onclick = quiz;

Je herkent een functie altijd aan de haakjes () achter de naam.

Zelfstudieopdracht 1

  1. De code hierboven laat een plaatje van Pikachu zien op het moment dat het antwoord goed is. Kun je de code zo aanpassen dat er een ander plaatje getoond wordt op het moment dat het antwoord fout is?

Zelfstudieopdracht 2

We gaan een eenvoudig spelletje maken, waarbij je op plaatjes van koeien moet klikken.

  1. Download game.zip en pak het uit. Open het mapje in VSCode. Maak een .js bestand in deze map en koppel je HTML aan dit bestand. Dit doe je altijd onderaan de body!
  2. Maak in JavaScript een variabele genaamd score en geef die de waarde 0.
    Maak voor elk plaatje een variabele, waar je door middel van document.querySelector ze koppelt aan elke id.
    Maak ook een variabele genaamd scorevakje en sla daar het HTML-element met id ‘scorevakje’ in op.
  3. Maak ook twee functies, function goed() en function fout()
  4. Voeg in JS een onclick attribuut toe aan elk plaatje. Het plaatje van een koe moeten de goed() functie starten en alle andere plaatjes starten de functie fout()
  5. In de functie goed() tel je 1 punt op bij de score:
    score = score + 1;
    scorevakje.innerHTML = score; // laat de score zien in het vakje
    

    In de functie fout() doe je natuurlijk het tegenovergestelde:

    score = score - 1;
    scorevakje.innerHTML = score; // laat de score zien in het vakje
    
  6. Sla het bestand op en test in de browser of het werkt.
  7. Voeg ook nog een if-statement toe aan de functie goed():
    if (score == 4) {
      scorevakje.innerHTML = "Je bent koe-goed!";
    }