🟨JavaScript en jQuery

Leerplandoelstellingen

In deze cursus (6IICT, Programmeer- en webtechnieken) werk je aan deze doelstellingen:

• 95 – dataverwerking gebruiken;
• 96 – controlestructuren gebruiken;
• 97 – functies aanmaken;
• 98 – een programma van de nodige foutafhandelingsprocedures voorzien;
• 99 – het begrippenkader van object-georiënteerd programmeren toelichten;
• 100 – een object van een klasse gebruiken;
• 101 – een klasse creëren (D).

Wat is JavaScript?

In het vorige hoofdstuk (HTML + CSS) leerde je hoe je een webpagina maakt. Wanneer je naar andere websites kijkt, zie je dat ze meestal interactief zijn: automatisch scrollen, berekeningen die worden uitgevoerd, menu’s die openklappen … Om je pagina interactief te maken gebruik je JavaScript.

Omdat je vorig jaar al veel over programmeren leerde (Python, Arduino, Raspberry Pi …), beperken we ons in deze cursus tot wat je nodig hebt om zelf aan de slag te gaan en je weg te vinden op het internet om je website zo interactief mogelijk te maken.

2.1 Hello world

Maak een nieuwe pagina aan met de naam javascript.html. Wanneer je op die pagina terechtkomt, wil je een melding krijgen: “Hallo wereld!”. Daarvoor plaats je onder de body een <script>-tag. Binnen die tag gebruik je de functie alert(); om de browser een melding te laten geven.

javascript.html<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Mijn eerste JavaScript</title>
  </head>
  <body>
    <script>
      alert("Hallo wereld!");
    </script>
  </body>
</html>

Probeer het zelf: pas de tekst aan en klik op Uitvoeren.

Commentaar

Binnen je script kan je commentaar toevoegen: tekst die de browser negeert en die enkel voor jou (of je collega) bedoeld is. Commentaar van één lijn begint met //. Commentaar van meerdere lijnen zet je tussen /* en */.

console.log() en de ontwikkelaarstools

Naast alert() is er console.log(). Die toont niets aan de gebruiker maar schrijft in de console van je browser (druk op F12 of rechtsklik → Inspecteren → tabblad Console). Professionele programmeurs gebruiken console.log() voortdurend om te controleren wat hun code doet. Fouten in je script verschijnen ook in die console: kijk er dus altijd eerst!

Synthese

2.2 Variabelen

Net als in Python kan je in JavaScript werken met variabelen. Het verschil met sommige andere talen is dat je het type niet vooraf moet vastleggen: JavaScript detecteert het type automatisch. Een variabele maak je aan met het woord var.

// het getal 10 opslaan in variabele getal (integer)
var getal = 10;

// het getal 20.56 opslaan (float; met een punt, geen komma)
var kommagetal = 20.56;

// tekst opslaan in de variabele tekst
var tekst = "Dit is een stukje tekst";

// de boolean true opslaan in de variabele juist
var juist = true;

Een variabele tonen

Je kan de browser een variabele laten tonen met alert(). Let op: de variabele krijgt geen aanhalingstekens. Zet je er wel aanhalingstekens rond, dan toont JavaScript letterlijk de naam.

De naam van een variabele

• Gebruik zinvolle namen: leeftijd, niet x1.
• Een naam begint met een letter, _ of $, en bevat geen spaties of streepjes.
• JavaScript is hoofdlettergevoelig: getal en Getal zijn verschillende variabelen.
• Gebruik camelCase voor namen uit meerdere woorden: getalGegokt, uitkomstTekst.
• Je kan een variabele later een nieuwe waarde geven: getal = 11; (zonder var opnieuw).

Getal of tekst? Het type telt

Het type van een waarde bepaalt wat een bewerking doet. Met typeof vraag je het type op. De belangrijkste types: number (getallen, ook kommagetallen), string (tekst), boolean (true of false), undefined (variabele zonder waarde) en object (later). Speel in de demo met + tussen tekst en getallen:

Probeer zelf: types

Voorspel eerst wat er in de console komt en controleer dan met Uitvoeren.

Synthese

2.3.1 Toewijzings- en rekenoperatoren

Met JavaScript voer je eenvoudige wiskundige berekeningen uit. De rekenoperatoren zijn + (optellen), − (aftrekken), * (vermenigvuldigen), / (delen) en % (de rest na deling, de modulo). Het =-teken is geen “is gelijk aan” maar een toewijzing: de waarde rechts wordt in de variabele links bewaard.

Opdracht: voorspel eerst wat de browser bij elke alert() zal tonen. Voer daarna het script uit en controleer. Je antwoorden vul je onderaan het hoofdstuk in bij de oefening.

2.3.2 Vergelijkingsoperatoren

Met JavaScript vergelijk je ook getallen en tekst. Het resultaat van een vergelijking is altijd een boolean: true of false.

Teksten worden alfabetisch, letter per letter vergeleken en hoofdletters tellen mee. Probeer het uit:

2.3.3 Logische operatoren

Met logische operatoren combineer je booleans. Je gebruikt ze vooral binnen een if om meerdere voorwaarden tegelijk te controleren.

Synthese

2.4.1 Het if-statement

Over het if-statement heb je al gehoord tijdens de lessen programmeren. In JavaScript werkt het exact hetzelfde. Wanneer de voorwaarde waar is, wordt het programma tussen de accolades uitgevoerd; is ze onwaar, dan gebeurt er niets.

var x = 50;
var y = 50;
if (x === y) {
  alert("waarde x is gelijk aan waarde y");
}

Opdracht. Hieronder staan dertien if-statements met alert(). Bepaal bij elk of de browser een melding geeft (true) of niet (false) en vul je antwoorden in bij de oefening. Controleer daarna met Uitvoeren: in de console zie je welke meldingen verschijnen.

2.4.2 Het if-else-statement

Met een if-else-statement voer je code uit als niet aan de voorwaarde van de if voldaan is. Hieronder is a niet gelijk aan b: dus wordt de else uitgevoerd.

2.4.3 Het if-else-if-statement

Met else if voeg je extra voorwaarden toe. Wanneer de eerste if niet voldaan is, kijkt JavaScript naar de volgende else if, enzovoort. Zodra één voorwaarde waar is, wordt dat stuk uitgevoerd en worden de rest overgeslagen. De laatste else vangt alle overige gevallen op.

2.4.4 De switch-statement

Een if-else-if-reeks die één variabele met telkens een andere waarde vergelijkt, kan je vervangen door een switch. Het resultaat is hetzelfde; we gaan er hier niet dieper op in, maar weet dat er een alternatief bestaat. Let op het woord break: zonder break loopt JavaScript door naar het volgende geval.

Korte schrijfwijze: de voorwaardelijke operator

Voor een eenvoudige keuze tussen twee waarden bestaat een verkorte vorm: voorwaarde ? waardeAlsWaar : waardeAlsOnwaar. Handig, maar gebruik hem alleen als hij leesbaar blijft.

Synthese

2.5 Math.random()

Om zoals in Python een dobbelsteen te simuleren, heb je een randomfunctie nodig. Daarvoor gebruik je het object Math, met veel wiskundige functies: Math.sin(x), Math.PI, Math.E, Math.round(), Math.log(x) … (de volledige lijst vind je op het internet). Math.random() geeft een kommagetal tussen 0 en 1 (0 mag, 1 niet). Voer het meerdere keren uit en bekijk het resultaat.

Een dobbelsteen

Een dobbelsteen levert een geheel getal. Je past het random getal aan met vermenigvuldigen en afronden:

var getal = 0;
getal = Math.random();
getal = getal * 11 + 1;
getal = Math.round(getal);
alert(getal);

• Math.round(x) rondt af naar het dichtstbijzijnde geheel getal; Math.floor(x) naar beneden; Math.ceil(x) naar boven.
• De vermenigvuldiging getal = getal * 11 kan korter: getal *= 11;. Hetzelfde geldt voor de andere toewijzingsoperatoren.

2.6 prompt()

In plaats van de gebruiker een melding te geven, kan de browser de gebruiker ook om een antwoord vragen met prompt(). De functie geeft het antwoord terug als tekst. Als tweede argument kan je al een suggestie meegeven tussen dubbele quotes ("" betekent: leeg).

2.7 confirm()

Met confirm() vraagt de browser om een bevestiging (OK of Annuleren). Je krijgt een boolean terug: true of false. Daarom gebruik je het vaak samen met een if-else. (In het antwoordenvak schrijf je ja voor OK en nee voor Annuleren.)

2.8 parseInt() en parseFloat()

Soms krijg je een waarde waarmee je wil rekenen, maar die JavaScript als tekst ziet (bv. het antwoord van prompt() of de inhoud van een invoerveld): var getal = "15"; is tekst. Met parseInt() maak je er een geheel getal van, met parseFloat() een kommagetal. Lukt het niet, dan krijg je NaN (Not a Number).

Synthese

3.1 De for-loop

De for-loop gebruik je voornamelijk wanneer je op voorhand weet hoeveel keer een lus moet worden uitgevoerd. Hij heeft drie onderdelen, gescheiden door puntkomma’s:

Elke keer de lus wordt doorlopen, verandert de waarde van de variabele tot de eindwaarde bereikt is. Hieronder is i de startwaarde: de lus wordt 10 keer doorlopen. Je kan tekst en een variabele combineren met het plusteken. i++ is hetzelfde als “elke ronde i met 1 verhogen”.

De lus in beeld

Verander de startwaarde, de grens en de stap. Let op wat er gebeurt bij een stap van 0: dan blijft de voorwaarde altijd waar en loopt het programma vast (oneindige lus).

3.2 De while-loop

Weet je niet hoe vaak een lus moet worden doorlopen, dan gebruik je een while-loop. Deze lus loopt zolang aan de voorwaarde voldaan is. Ook hier moet er in de lus een stap zijn waarbij de variabele verandert. De while-loop gebruik je vooral bij tekst of wanneer de variabele om het even welke waarde kan aannemen.

do…while, break en continue

• do … while: de code wordt minstens één keer uitgevoerd en daarna herhaald zolang de voorwaarde waar is.
• break springt onmiddellijk uit de lus.
• continue slaat de rest van deze ronde over en gaat naar de volgende.

Synthese

4 Functies

Je gebruikt een functie wanneer je een deel van je code meerdere keren wil oproepen en toch maar één keer wil schrijven, of wanneer je de code door iets van buitenaf (een knop, een timer) wil laten oproepen. Een functie aanmaken is eenvoudig: je geeft ze een naam, zet de code tussen accolades en roept ze daarna op. Zonder oproep gebeurt er niets!

Parameters

Je kan parameters meegeven met een functie: variabelen tussen de haakjes van de functie die bij elke oproep een andere waarde krijgen. In het voorbeeld heeft de parameter de naam voornaam. De functie TweedeFunctie() wordt vier keer uitgevoerd en meldt telkens een andere naam: Jan, Piet, Joris en Corneel. De waarden die je bij de oproep meegeeft, heten argumenten.

Een functie als machine: return

Een functie kan ook een waarde teruggeven met return. Zo kan je het resultaat in een variabele bewaren of in een berekening gebruiken. Zodra return wordt uitgevoerd, stopt de functie. Een functie zonder return geeft undefined terug. Roep functies hieronder op en kijk wat er in en uit gaat:

function kwadraat(x) {
  return x * x;
}
var resultaat = kwadraat(7);   // 49
alert(resultaat + kwadraat(2)); // 53

Bereik van variabelen (scope)

Een variabele die je binnen een functie met var aanmaakt, bestaat enkel in die functie (lokale variabele). Een variabele die je buiten alle functies aanmaakt, is overal beschikbaar (globale variabele). Parameters zijn ook lokaal.

Uitbreiding: de pijlfunctie

In moderne code zie je vaak een kortere schrijfwijze: de pijlfunctie (arrow function). Ze doet hetzelfde. Bij een functie met één instructie mag return en de accolades weg.

Synthese

5 Events

Wanneer je een website hebt gemaakt, wil je dat er een functie wordt uitgevoerd wanneer er op een knop wordt gedrukt. Daarvoor gebruik je events. Je voegt aan de button-tag een attribuut onclick toe: wanneer er op de knop wordt gedrukt, wordt de functie toonMelding() uitgevoerd.

<button type="button" onclick="toonMelding()">
  klik hier
</button>

function toonMelding() {
  alert("Er is op de knop gedrukt");
}

Meer events

Naast onclick zijn er nog veel andere events, bijvoorbeeld onchange. Dat kan je gebruiken bij een input-tag: wanneer de gebruiker een tekst ingeeft (en het veld verlaat), wordt de functie uitgevoerd. Ontdek welke events er afgaan als je iets doet:

Een parameter meegeven

Bij de functie die je oproept via een onclick- of onchange-event kan je ook een parameter meegeven. De waarde moet tussen aanhalingstekens (single quotes) staan: het attribuut zelf staat immers al tussen dubbele quotes.

Escaping van quotes

Opmerking: wil je een waarde doorsturen die zélf een quote bevat (zoals l’arbre), dan moet je dat anders aanpakken: escaping quotes met character codes. In plaats van ' schrijf je ' en in plaats van " schrijf je ".

<button type="button" onclick="toonMelding(&#39;l’arbre&#39;)">
  L’arbre
</button>

Uitbreiding: addEventListener

Professionele programmeurs zetten de JavaScript liever niet in de HTML-tag. Met addEventListener() koppel je vanuit je script een functie aan een element. Daarvoor zoek je het element eerst op, bv. met document.getElementById(). Met jQuery (hoofdstuk 10) wordt dit nog korter.

Synthese

6 Opslaglocatie

Net als bij een CSS-bestand kan je JavaScript op twee manieren bewaren: in het HTML-bestand (liefst onderaan, vóór </body>) of op een externe locatie. Bij grotere projecten plaatsen we de JavaScript-bestanden altijd in een externe map genaamd js (de CSS-bestanden komen in de map css). Het bestand heeft steeds de extensie .js. Daarna roep je dit bestand op in het HTML-bestand met een script-tag met het attribuut src:

index.html<script src="js/main.js"></script>

Deze code plaats je ofwel bovenaan in de <head>, maar net als bij CSS kan hij op eender welke plaats staan. Onderaan de body is meestal het veiligst, omdat dan alle elementen al bestaan wanneer je script start.

Een voorbeeld van een mapstructuur

mapstructuurmijn-website/
├── index.html
├── javascript.html
├── css/
│   └── style.css
└── js/
    └── main.js

In js/main.js staat enkel JavaScript, zonder <script>-tags:

js/main.jsfunction toonMelding() {
  alert("Er is op de knop gedrukt");
}

Uitbreiding: defer

Zet je het script toch in de <head>, dan bestaat de rest van de pagina nog niet wanneer het script draait. Met het attribuut defer wacht de browser tot de pagina geladen is: <script src="js/main.js" defer></script>.

Synthese

7 jQuery

jQuery is een vrije JavaScript-bibliotheek die het eenvoudiger maakt om enkele bewerkingen te realiseren binnen JavaScript. Er bestaan nog tal van andere bibliotheken en frameworks (React, Angular, Vue …). Om jQuery te gebruiken, moet je de bibliotheek eerst toevoegen. Daarvoor plaats je onderstaande code in de head-tag van je document (het boek gebruikt versie 1.12.4; de recentere versie 3.x werkt op dezelfde manier):

index.html<head>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>

Het voorbeeldproject: de BMI-calculator

Je leert werken met jQuery aan de hand van een voorbeeldbestand over de Body Mass Index (bestand 08-BMI.html op de website). De gebruiker vult bepaalde velden in (lengte, massa), waarna het programma de BMI berekent en toont of ze goed is of niet. Vooraleer je begint, moet je weten hoe de BMI berekend wordt en welke waarden gezond zijn.

Zo ziet het eindresultaat eruit (je bouwt het stap voor stap):

Eerst: een knop met een functie

Wanneer we op de knop Bereken drukken, willen we eerst de melding “Er werd op de knop gedrukt” zien. De knop roept daarvoor een functie op (in het boek berekenPrijs(); wij noemen ze berekenBMI()). Probeer het uit op de pagina hieronder:

Selectors en val()

We hebben nu een melding, maar we willen het resultaat van de BMI. Daarvoor hebben we de waarden nodig die bij lengte en massa ingevuld werden. Binnen onze functie gebruiken we jQuery. Een jQuery-opdracht begint altijd met een dollarteken gevolgd door haakjes. Binnen die haakjes staat een tekst die naar een id of een class verwijst:

De id staat tussen quotes (al dan niet single) omdat het een constante tekst is. Probeer zelf selectors uit en kijk welke elementen geselecteerd worden:

De waarde uitlezen met .val()

Nu jQuery weet dat het naar het element met id “lengte” moet zoeken, geven we de opdracht de waarde (value) ervan op te vragen met de functie val(). Die waarde bewaar je in een variabele en toon je aan de gebruiker. Vul een lengte in op de pagina hieronder en klik op Bereken.

7.2 Alternatieven zonder jQuery

In plaats van jQuery hadden we de waarde van de id ook kunnen opvragen zonder jQuery, met gewoon JavaScript. Dat is langer, maar het werkt overal zonder bibliotheek. (Let op: value is hier een eigenschap, geen functie, dus zonder haakjes.)

var lengte = document.getElementById("lengte").value;

Binnen jQuery kan je ook zoeken op de unieke naam (het attribuut name) van een input:

$("input[name=lengte]").val();

Synthese

7.3 jQuery – val() om te schrijven

In het vorige hoofdstuk berekende je de BMI. Die waarde willen we nu in het invoerveld uitkomstWaarde plaatsen. Ook daarvoor gebruik je val(), maar nu geef je er een waarde aan mee: in plaats van de value te lezen van een id en ze in een variabele te plaatsen, plaats je juist een value in de id.

$("#uitkomstWaarde").val(DeBekomenWaarde);

Opdracht 7.4: plaats de BMI in het veld uitkomstWaarde. Nu je de BMI hebt, weet je ook of de persoon met ondergewicht, gezond gewicht, overgewicht of obesitas te maken heeft: zorg dat de gebruiker een melding van zijn gewichtstoestand krijgt.

7.5 jQuery – html()

In plaats van de gebruiker de gewichtstoestand via alert() te melden, tonen we ze op de webpagina zelf. We vervangen de tekst binnen het element met id uitkomstTekst door de gewichtstoestand. Daarvoor verander je de html van dat element:

$("#uitkomstTekst").html(Gewichtstoestand);

html() mag ook HTML-tags bevatten (bv. "<b>Gezond</b>"); met text() zet je gewone tekst neer. Gebruik text() zodra de tekst van een gebruiker komt (dat is veiliger).

7.6 jQuery – styling met css()

Om de gebruiker te waarschuwen als zijn gewichtstoestand niet in orde is, verander je ook de kleur van de tekst met css(). Tussen de haakjes plaats je accolades zodat je meerdere stylingparameters kan toevoegen, gescheiden door een komma. Elke parameter staat tussen quotes, gevolgd door een dubbelepunt en de waarde tussen quotes. Je mag enkele of dubbele quotes gebruiken.

$("#uitkomstTekst").css({"color": "red", "font-size": "30px"});

// voor één eigenschap mag het korter:
$("#uitkomstTekst").css("color", "red");

Nog handig: met addClass(), removeClass() en toggleClass() voeg je een CSS-class toe of weg (de opmaak staat dan netjes in je CSS-bestand), en met hide(), show() en toggle() verberg of toon je een element.

Methoden aan elkaar rijgen

Je kan jQuery-opdrachten achter elkaar op hetzelfde element uitvoeren (“chaining”): $("#tekst").html("Hoi").css("color", "red");. Het is dezelfde selector, dus je hoeft ze maar één keer te schrijven.

Synthese

7.8 Controleren of alle waarden zijn ingevuld

Momenteel kan je ook op de knop Bereken drukken wanneer niet alle waarden zijn ingevuld. Pas je programma zo aan dat je een melding krijgt dat niet alle waarden zijn ingevuld, en dat er dan geen BMI wordt berekend. Een leeg invoerveld geeft van val() een lege tekst "" terug. Dat controleer je met een if, en met return stop je de functie vroegtijdig.

7.9 Form

Met een formulier (form) kan het eenvoudiger. Bij elke input, textarea … zet je een extra attribuut required: de browser laat het formulier dan niet verzenden zolang dat veld leeg is en toont zelf een melding. Je JavaScript hoef je daarvoor niet te schrijven!

<form id="berekenForm">
  <input type="number" id="lengte" required /><p>Lengte (cm)</p>
  <button type="submit" id="submit">Bereken</button>
</form>

<script>
  $("#berekenForm").submit(function () {
    alert("berekend");
  });
</script>

• Heel je formulier staat binnen de form-tag, die een id krijgt. Laat de attributen action en method voorlopig weg (die komen later aan bod).
• Bij de input voeg je required toe.
• De knop verandert van type="button" naar type="submit". De onclick verdwijnt: nu start je functie via $("#berekenForm").submit(function () { … });.

Probeer het uit: laat een veld leeg en klik op Bereken.

Het eindresultaat

Zo werkt de volledige BMI-calculator: controle op lege velden, berekening, toestand en kleur. Bouw ze na met alles wat je in hoofdstuk 10 t/m 12 leerde.

Synthese

7.10 jQuery – variabelen

Je leert nu variabelen gebruiken binnen jQuery. Kopieer eerst onderstaande code naar je bestand: vijf knoppen, waarvan de id de naam is van een kleur. Bij een klik wordt de kleur als parameter meegegeven.

<div class="kleuren">
  <button class="resetKleur" id="red" type="button" onclick="kleuren('red')">rood</button>
  <button class="resetKleur" id="green" type="button" onclick="kleuren('green')">groen</button>
  <button class="resetKleur" id="orange" type="button" onclick="kleuren('orange')">oranje</button>
  <button class="resetKleur" id="blue" type="button" onclick="kleuren('blue')">blauw</button>
  <button class="resetKleur" id="reset" type="button" onclick="reset()">reset</button>
</div>

Wanneer je op een knop drukt, wordt de kleur meegegeven (parameter). De id van de knop heeft dezelfde naam als de parameter. Het is nu heel eenvoudig de kleur van de knop te veranderen door een variabele in jQuery te gebruiken:

function kleuren(kleur) {
  $('#' + kleur).css({"background-color": kleur, "color": "white"});
}

We sturen de kleur (parameter) door naar het script, waar ze in de variabele kleur terechtkomt, bijvoorbeeld met de waarde “green”. Met $('#' + kleur) plak je een hekje aan de waarde van de variabele (dat wordt "#green") en spreek je zo de id “green” aan.

Alle knoppen tegelijk: een class

Met de resetknop willen we alle knoppen terug een witte achtergrond en een blauwe tekstkleur geven. Daarvoor heeft de knop het event reset(). Deze keer roep je geen id aan maar een class: $('.resetKleur'). Die class staat bij elke knop en zal dus alle knoppen een nieuwe achtergrondkleur geven.

Uitbreiding: this en .on()

Met $(".resetKleur").click(function () { … }) koppel je één functie aan alle knoppen met die class. Binnen de functie verwijst $(this) naar de knop waarop geklikt werd, en $(this).text() leest de tekst ervan. Zo heb je geen onclick meer nodig in de HTML.

Synthese

7.11 Opdracht: de rekenmachine

In dit hoofdstuk leerde je meer over jQuery. Je maakt nu zelf een telmachine. Op de website vind je een HTML-bestand waarmee je kan vertrekken (09-Rekenmachine.html). Wanneer je een getal indrukt, moet dat verschijnen in het gebied resultaat. Vervolgens kan je een wiskundige bewerking uitvoeren en een tweede getal intypen. Wanneer je op het gelijkheidsteken drukt, wordt het resultaat getoond. Hiervoor gebruik je best twee hulpinputs waarin je het tussentijdse resultaat kan stockeren.

Zo werkt het eindresultaat. Kijk rechts wat de hulpvariabelen onthouden:

Het probleem in stappen

Hulpmiddelen die je nodig hebt: $(".cijfer").click(function () { … }) koppelt een functie aan alle cijferknoppen, $(this).text() leest de tekst van de ingedrukte knop, en .val() leest en schrijft de invoervelden.

Werk het uit

Onderstaande pagina bevat de rekenmachine zonder werking: de cijferknoppen hebben de class cijfer, de bewerkingen de class bewerking, het gelijkheidsteken heeft id is. Er zijn drie verborgen hulpvelden: #getal1, #bewerking en #nieuw (of je een nieuw getal begint). Probeer eerst zelf, daarna kan je de oplossing bekijken.

Uitbreidingen om zelf te proberen

• Een C-knop die alles wist.
• Een +/−-knop die het teken omdraait.
• Voorkom een tweede komma in hetzelfde getal.
• Deel je door 0? Toon dan “Fout” in plaats van Infinity.
• Ketenen: 2 + 3 + 4 = : toon na de tweede bewerking al het tussenresultaat.

Synthese

Arrays: een geordende lijst

Een array bewaart meerdere waarden in één variabele, tussen rechte haken. Elk element heeft een index (volgnummer) die begint bij 0. Met .length vraag je het aantal elementen op.

Elementen toevoegen en verwijderen

Een lus over een array

Met een for-lus loop je alle indexen af, van 0 tot length - 1. Handiger is for … of (elk element) of forEach (een functie voor elk element).

Uitbreiding: filter en map

Twee krachtige methodes geven een nieuwe array terug: filter() houdt enkel de elementen over die aan een voorwaarde voldoen; map() transformeert elk element. Ze gebruiken een (pijl)functie.

Objecten: een fiche met eigenschappen

Een object groepeert samenhorende gegevens als sleutel: waarde-paren tussen accolades. Zo beschrijf je één ding (een leerling, een boek). Je leest een eigenschap met een punt (leerling.naam) of met haken (leerling["naam"]). Een object kan ook een functie bevatten: een methode. Een array van objecten is een kleine “tabel”.

JSON: gegevens als tekst

JSON (JavaScript Object Notation) is de tekstvorm van objecten en arrays. Het is de taal waarin een pagina en een server gegevens uitwisselen (zie het AJAX-hoofdstuk). Met JSON.stringify() maak je van een object een tekst; met JSON.parse() maak je van die tekst weer een object. In JSON staan ook de sleutels tussen dubbele quotes.

Synthese

De pagina als een boom (DOM)

De browser bewaart je pagina als een boom van elementen: het DOM (Document Object Model). JavaScript en jQuery kunnen die boom aanpassen terwijl de pagina draait: elementen toevoegen, verwijderen, verplaatsen of van uitzicht veranderen. Zo bouw je pagina’s die reageren zonder ze te herladen.

Elementen toevoegen

Met .append() plak je HTML in een bestaand element. Zo maak je bij elke klik een nieuw lijstitem. Probeer het: elke klik voegt een taak toe.

Events op elementen die er nog niet zijn

Een gewone .click() koppelt zich aan de elementen die er nu zijn. Elementen die je later toevoegt, doen niet mee! De oplossing is een gedelegeerd event: $("#lijst").on("click", "li", function () { … }). Het event wordt aan het vaste element (#lijst) gekoppeld en werkt ook voor toekomstige li’s. Klik op een taak om ze door te strepen, dubbelklik om ze te verwijderen:

Alle elementen doorlopen met each()

Met .each() loop je over alle elementen die je selecteerde. Binnen de functie is $(this) telkens het huidige element. Handig voor bv. een som van alle prijzen op een pagina.

Synthese

Soorten fouten

Een programma kan op drie manieren mis gaan. Leer ze onderscheiden, dan vind je de oorzaak veel sneller:

Lees een foutmelding altijd van boven naar onder: het type, de uitleg en het regelnummer staan erin. Zet console.log() in je code om te controleren wat de waarden zijn.

try … catch

Met try … catch beschermt je code die fout kan lopen. Code in try { … } wordt uitgevoerd; gaat er iets mis, dan springt JavaScript naar catch (fout) { … } in plaats van te crashen. De variabele fout bevat details, o.a. fout.message. Met finally { … } voer je code uit die altijd moet gebeuren.

Zelf een fout opwerpen: throw

Soms is iets in jouw regels een fout, ook al kent JavaScript dat niet als fout: bv. delen door 0 of een negatieve leeftijd. Met throw new Error("uitleg") werp je zelf een fout op. Die kan je dan opvangen met try … catch. Een functie die zo werkt, geeft de aanroeper de kans om te reageren.

Invoer van de gebruiker controleren

Vertrouw nooit op wat een gebruiker intypt. Controleer of de invoer bestaat, of ze een getal is (isNaN()) en of ze binnen de toegelaten grenzen ligt. Geef een duidelijke melding, geen technische foutmelding.

Debuggen: zo zoek je een fout

Synthese

Het begrippenkader

Bij object-georiënteerd programmeren (OOP) bouw je je programma uit objecten: dingen met eigenschappen (wat ze zijn of hebben) en methodes (wat ze kunnen). Een klasse is de bouwtekening; elk object (of instantie) is een bouwwerk volgens die tekening.

Een klasse maken en gebruiken

Een klasse maak je met class Naam { … } (met een hoofdletter). De constructor krijgt de beginwaarden en bewaart ze in this: het object zelf. Met new Naam(…) maak je een object. Methodes schrijf je zonder het woord function.

Overerving (differentiatie)

Een klasse kan alles erven van een andere klasse met extends en er iets aan toevoegen. Zo schrijf je gemeenschappelijke code maar één keer. Met super(…) roep je de constructor van de ouderklasse op.

Ingebouwde objecten

Je gebruikt al lang objecten van klassen die JavaScript zelf meebrengt: Math, Date, Array, String … Met new Date() maak je bijvoorbeeld een object dat de huidige datum en tijd bevat, met methodes zoals getFullYear().

Synthese

Asynchroon: niet wachten

JavaScript voert je code van boven naar onder uit, maar sommige dingen duren: een timer, een antwoord van een server. Zolang je wacht, mag de pagina niet blokkeren. Daarom gebruik je asynchrone code: je geeft een functie mee (een callback) die pas wordt uitgevoerd wanneer het klaar is. Kijk naar de volgorde van de meldingen:

Wat is AJAX?

AJAX (Asynchronous JavaScript And XML) is de techniek waarmee je pagina op de achtergrond een verzoek naar een server stuurt en het antwoord verwerkt, zonder de pagina te herladen. Zo werken zoekvoorstellen, chatberichten, likes en live-scores. De server is bij ons PHP (zie de PHP-cursus); de gegevens reizen als JSON.

$.ajax() met POST

In jQuery gebruik je $.ajax() met een object vol instellingen:

js/main.js$.ajax({
  url: "groet.php",
  method: "POST",
  data: { naam: $("#naam").val() },
  dataType: "json",
  success: function (antwoord) {
    $("#uit").html(antwoord.tekst);
  },
  error: function () {
    $("#uit").html("De server is niet bereikbaar.");
  }
});

De kant van PHP

Het bijhorende PHP-bestand leest de gegevens uit $_POST, verwerkt ze en antwoordt met JSON (json_encode). Dat antwoord komt in je success-functie terecht als een JavaScript-object.

groet.php<?php
// groet.php
header('Content-Type: application/json');
$naam = trim($_POST['naam'] ?? '');

if ($naam === '') {
    echo json_encode(['ok' => false, 'tekst' => 'Geef een naam in.']);
    exit;
}
echo json_encode(['ok' => true, 'tekst' => 'Hallo ' . htmlspecialchars($naam) . '!']);

Het antwoord verwerken

Het antwoord is een object: je leest zijn eigenschappen met een punt. Met een if kan je op antwoord.ok reageren. Het antwoord kan ook een lijst zijn (een array van objecten): daar loop je met each() of forEach over. Zo bouw je bv. een tabel op met append() (hoofdstuk 16). Test de verwerking hier met een zelfgemaakt antwoord, zoals de server het zou sturen:

Synthese