Les 4 - Fouten opsporen en de console - Deel 1

De console in Repl.it

Bij het programmeren gaat natuurlijk vaak iets mis. In Python krijg je dan direct een foutmelding maar in JavaScript moet je eerst weten waar je die foutmelding kunt vinden. In JavaScript gebruiken we hiervoor de console. We laten je hieronder zien hoe dat er in Repl.it uit ziet.

Op de console vindt je twee soorten berichten. Foutmeldingen en Berichten van het programma.

In het filmpje verder op deze pagina laten we zien waar je dit kunt vinden en hoe je sommige fouten kunt oplossen.

Foutmeldingen

De browser probeert jouw JavaScript code zo goed mogelijk uit te voeren. Als er echter een fout optreedt dan laat hij dit weten via de console. Daarna probeert hij wel zo goed mogelijk verder te gaan met het uitvoeren van je programma. Dit is dus anders dan bij Python waar je programma gelijk stopt zodra er iets fout gaat (tenzij je daar iets voor geprogrammeerd hebt).

Voorbeelden van een foutmelding:

TypeError: Cannot set property 'innerHTML' of null
    at https://replbox.repl.it/data/web_project/2a8f576e7dda09279cc3cb3dbdffb6bf/index.js:2:17

Of:

ReferenceError: verander is not defined
    at https://replbox.repl.it/data/web_project/919772c41713434cedd9d51f6c051c49/index.js:4:33

Hier een video die dit laat zien in Repl.it:

Berichten van het programma

Je kunt ook zelf gegevens naar de console schrijven net zoals je in Python het print()-commando gebruikt. Dit is heel nuttig om te weten waar je bent in je programma, wat er fout gaat en waarom. Je gebruikt hiervoor console.log("Mooi bericht!");.

Een voorbeeldstukje in script.js:

let tekst = document.getElementById("tekst");
console.log("De innerHTML van `tekst` is: " + console.log(tekst.innerHTML));

Op deze manier kunnen we berichten achter laten op de console om te laten zien wat het programmam allemaal doet of om uit te vinden wat er aan de hand is.

Hier een video die dit laat zien in Repl.it:

Note: Opdrachten

Maak nu in Repl:

  • Inleveropdracht Les 4 - Debug, vind de fouten!
  • Oefenopdracht Les 4 - Debug - Kleurtjes geven

results matching ""

    No results matching ""