Javascript is een programmeertaal die interactiviteit aan je website toevoegt (bijvoorbeeld: spelletjes,  een actie die in gang wordt gezet als je op een knop drukt, data  die via formulieren wordt verwerkt, dynamisch toegepaste stijlen, animaties). Dit artikel helpt je om met deze taal te beginnen en geeft je een idee van wat de mogelijkheden zijn.

Wat is JavaScript eigenlijk echt?

JavaScript ("JS" afgekort) is een volwaardige dynamische programmeertaal die je kan toepassen op een HTML document om interactie mogelijk te maken. Het is bedacht door Brendan Eich, mede-oprichter van het Mozilla project, de Mozilla foundation, en de Mozilla corporation.

Je kan zo'n beetje alles met JavaScript. Je zal beginnen met simpele toevoegingen zoals carrousels, plaatjescollecties, veranderende layouts, en reacties als er op een knop wordt gedrukt. Als je wat meer ervaring met de taal hebt opgedaan, zal je in staat zijn spelletjes te maken, geanimeerde 2d- en 3d-afbeeldingen, volledige database gestuurde apps en nog veel meer!

JavaScript zelf is vrij compact maar erg flexibel. Ontwikkelaars hebben veel hulpmiddelen geschreven bovenop de bestaande kern, waardoor een enorme hoeveelheid extra functionaliteit mogelijk is met relatief weinig moeite. Om er een paar te noemen:

  • Application Programming Interfaces (APIs) die in webbrowsers ingebouwd zijn. Ze kunnen webpagina's maken, CSS-stijlen genereren, een  videostream van de gebruikers' webcam onderscheppen en manipuleren of audio samples en 3d-afbeeldingen creëren.
  •  APIs van derden die het ontwikkelaars mogelijk maken om de functionaliteit van bijv. Facebook of Twitter toe te voegen.
  •  Frameworks (kader of structuur in het Nederlands) en bibliotheken die je op je HTML kan toepassen om snel sites en applicaties op te zetten.

Een "hallo wereld" voorbeeld

De mogelijkheden hierboven klinken echt opwindend en dat is het ook - JavaScript is een van de meest levendige webtechnologieën van het moment. Zodra je er wat beter in wordt, zullen je sites een nieuwe dimensie van kracht en creativiteit betreden.

Niettemin is JS wat lastiger onder de knie te krijgen dan HTML en CSS. Je moet klein beginnen en er met kleine stapjes aan blijven werken. Om te beginnen laten we zien hoe je wat standaard JS aan je pagina toe kan voegen om een "hallo wereld!" voorbeeld te maken.(het standaardvoorbeeld in programmeertalen).

Belangrijk: Wanneer je de rest van deze cursus nog niet gevolgd hebt  download dan deze voorbeeld code  en gebruik het als uitgangspunt. Bekijk de pagina in je browser alvorens verder te gaan.

  1. Ga naar de scriptsmap  van je testsite en maak een nieuw bestand dat je main.js. noemt. Sla het op in je scriptsmap.  
  2. Open nu  index.html met een broncode-editor en voeg het volgende element toe op een nieuwe regel net voor het sluitende </body> label:
    <script src="scripts/main.js"></script>
  3. Dit scriptelement doet feitelijk hetzelfde als het <link>-element voor CSS — het past het JS toe op de pagina zodat het een effect kan hebben op de HTML (en CSS, en al het andere op de pagina)
  4. Voeg nu de volgende code toe aan je  main.js bestand:
    var mijnHoofding = document.querySelector('h1');
    mijnHoofding.textContent = 'Hallo wereld!';
  5. Tot slot zorg je ervoor dat je HTML- en JavaScriptbestanden opgeslagen zijn en laad je index.html in de browser. Je zou iets dergelijks moeten zien:

Opmerking: We hebben het <script>-element onderaan het HTML-bestand gezet en daar is een goede reden voor. De HTML wordt namelijk in de browser geladen in de volgorde waarin die is geschreven. Als het script eerst wordt geladen en de HTML eronder moet beïnvloeden, zou dat niet kunnen werken omdat er nog geen HTML is geladen waarop het script zijn invloed kan uitoefenen. Daarom is het vaak de beste strategie om je script onder de HTML te plaatsen.

Wat gebeurde er?

Je koptekst is nu veranderd in "Hallo wereld!" met behulp van JavaScript. Dit deed je door een functie te gebruikten die querySelector() heet. Met deze functie kan je de verwijzing naar de koptekst (h1) grijpen en opslaan in een variabele (mijnHoofding). Dit lijkt sterk op wat CSS doet met selectoren. Als je iets met een element op je pagina wil doen, zul je het eerst moeten selecteren en opslaan in een variabele.

Vervolgens verander je de waarde van de textContent-eigenschap van mijnHoofding in "Hallo wereld!".  (met textContent kan je de tekstinhoud van de hoofding (h1) veranderen) .

Opmerking: De twee functies die je hierboven hebt gebruikt vormen beide een onderdeel van het  Document Object Model (DOM) API, dat het mogelijk maakt om documenten te manipuleren.

Stoomcursus basisbegrippen JS

We gaan je een paar basiseigenschappen van de Javascript-taal uitleggen zodat je beter begrijpt hoe alles werkt. Meer nog, deze begrippen worden standaard in alle programmeertalen gebruikt. Als je deze basis begrijpt, zou je in staat moeten zijn om ongeveer alles te beginnen programmeren! 

Belangrijk: Probeer de voorbeeldcodes in dit artikel in je Javascript-console uit om te zien wat er gebeurt. Meer details over JavaScript-consoles vind je in Discover browser developer tools.

Variabelen

Variabelen zijn containers waarin je waarden kan bewaren. Je begint door je variabele te declareren met het var sleutelwoord. Dat wordt dan gevolgd door de naam die je aan je variabele geeft. Je kan zelf kiezen welke: (in het Engels zegt men 'to declare' wat 'aangeven', 'verklaren' of 'verkondingen' betekent. Ik gebruik 'declareren' want deze term kom je vaak tegen als je hem googelt):

var mijnVariabele;

Opmerking: Alle verklaringen in JavaScript moeten op een kommapunt eindigen, om aan te duiden waar de verklaring eindigt. Als je er geen kommapunten in steekt, kan je onverwachte resultaten krijgen.

Opmerking: Je kan een variabele bijna elke naam die je kan bedenken geven maar er zijn toch een paar beperkingen (meer daarover in dit artikel over naamgevingsregels voor variabelen.) Als je niet zeker bent van jezelf, kan je je  de naam van je variabele hier controleren om te zien of hij geldig is.

Opmerking: JavaScript is hoofdlettergevoelig — mijnVariabele is niet dezelfde variabele als mijnvariable. Als je problemen krijgt in je code, controleer dan je hoofdletters! 

Nadat je een variabele hebt gedeclareerd, kan je hem een waarde geven:

mijnVariabele = 'Bob';

Als je dat wenst, kan je deze twee operaties op dezelfde lijn uitvoeren:

var mijnVariabele = 'Bob';

Je kan de waarde van de variabele ophalen door de naam van de variabele te noteren en op 'Enter' te duwen:

mijnVariabele;

Nadat je de variabele een waarde hebt gegeven, kan je er later voor kiezen die te veranderen:

var mijnVariabele = 'Bob';
mijnVariabele = 'Steven';

Let op het feit dat variabelen verschillende datatypes hebben:

Variabele Verklaring Voorbeeld
String Een string is wat als tekst geldt. Om aan te duiden dat de variabele een string is, moet je die tussen aanhalingstekens zetten. var mijnVariabele = 'Bob';
Nummer Een nummer. Nummers worden niet omring door aanhalingstekens . var mijnVariable = 10;
Boolean Een waarde die waar (true) of niet waar(false) is. De woorden true en false zijn speciale sleutelwoorden in JS en hebben geen aanhalingstekens nodig. var mijnVariable = true;
Array Een structuur die je toestaat om meerdere waarden in in één enkele referentie op te slaan (een lijst dus). var mijnVariabele = [1,'Bob','Steven',10];
Verwijs naar elk lid van de array op deze manier:
mijnVariabele[0], mijnVariabele[1], etc.
Object In feite, eender wat. Alles in JavaScript is een object en kan worden opgeslagen in een  variabele. Houd er rekening mee terwijl je leert.   var mijnVariable = document.querySelector('h1');
Alle voorbeelden hierboven ook.

Dus waarom heb je variabelen nodig? Wel, variabelen zijn nodig om alles wat interessant is mogelijk te maken in het programmeren. Als waarden niet zouden kunnen veranderen, dan zou je er niets dynamisch mee kunnen doen, zoals een welkomstboodschap personaliseren of een afbeelding in een beeldgallerij veranderen. 

Commentaren

Je kan commentaren in je JavaScript code plaatsen, net zoals je dat in CSS kan:

/*
Alles ertussen is een commentaar.
*/

Als je commentaar geen regeleindes bevat, is het vaak makkelijker om die achter twee schuine streepjes te zetten:

// Dit is een commentaar

Operatoren

Een operator is een mathematisch symbool dat een resultaat produceert. Dit resultaat is gebaseerd op twee waarden (of variabelen). In de volgende tabel kan je een paar van de eenvoudigste operatoren zien, met een paar voorbeelden ernaast die je in je Javascript console kan uitproberen.

Operator Verklaring Symbo(o)l(en) Voorbeeld
optellen/aaneenschakeling Gebruiken we om twee nummers op te tellen of om twee strings (tekst dus) aan elkaar te plakken. + 6 + 9;
"Hallo " + "wereld!";
aftrekken, vermenigvuldigen, delen Met deze variabelen kan je rekenen. -, *, / 9 - 3;
8 * 2; // vermenigvuldigen is een asterisk in JS
9 / 3;
toewijzingsoperator Dit heb je al gezien: het wijst een waarde toe aan een variabele. = var mijnVariabele = 'Bob';
vergelijkingsoperator  Doet een test om te zien of twee waarden gelijk zijn aan elkaar. Levert een true/false (Boolean) resultaat op. (true betekent waar en false niet waar. True en false zijn sleutelwoorden en worden dus in het Engels gebruikt.) === var mijnVariable = 3;
myVariable === 4;
Negatie, niet gelijk aan Levert de logisch tegenovergestelde waarde van wat erop volgt op. Het verandert een true in een false enz. Als het samen met de vergelijkingsoperator wordt gebruikt, test de negatieoperator of twee waarden niet gelijk zijn aan elkaar. !, !==

De uitdrukking is waar, maar de vergelijking levert false op omdat we hem negatief hebben gemaakt. 

var mijnVariabele = 3;
!(mijnVariabele === 3);

Hier testen we of "mijnVariable NIET gelijk is aan 3". Dit levert false op omdat mijnVariabele wel degelijk gelijk is aan 3.

var mijnVariable = 3;
mijnVariable !== 3;

Er zijn nog veel meer operatoren te ondekken maar voorlopig is dit genoeg. Je vindt een complete lijst in Expressions and operators.

Opmerking: Als je datatypes met elkaar vermengt, kan je vreemde resultaten krijgen als je berekeningen doet. Wees dus voorzichtig en verwijs correct naar je variabelen zodat je de resultaten krijgt die je verwacht. Voer bijvoorbeeld "35" + "25" in je console in. Waarom zie je niet het resultaat dat je verwacht? De aanhalingstekens veranderen de nummers in strings. Je eindigt dus met aaneengeplakte strings in plaats van opgetelde nummers. Als je  35 + 25 ingeeft, zal je wel het correcte resultaat krijgen.

Voorwaarden

Voorwaarden (conditionals in het Engels) zijn codestructuren die ons toestaan te testen of een uitdrukking een true of false resultaat oplevert. We kunnen dan een andere code uitvoeren, afhankelijk van het resultaat. De vaakst voorkomende vorm die een voorwaarde aanneemt noemen we if ... else.  Dus bijvoorbeeld:

var roomIjs = 'chocolade';
if (roomIjs === 'chocolade') {
  alert('Oh, ik houd van chocolade roomijs!');    
} else {
  alert('Awwww, maar chocolade is mijn favoriet...');    
}

De uitdrukking in de if ( ... ) is de test — deze gebruikt de vergelijkingsoperator (zoals hierboven beschreven) om de variabele roomIjs met de string chocolade te vergelijken en vast te stellen of de twee gelijk zijn aan elkaar. Als deze vergelijking true oplevert, voer je het eerste codeblok uit. Indien niet, sla je die code over en voer je het tweede codeblok uit dat na de else-verklaring staat.

Functies

Functies zijn een manier om functionaliteit, die je opnieuw wil gebruiken, te verpakken. Wanneer je de functie wil gebruiken, kan je die aanroepen met zijn naam en hoef je niet constant de hele code te herschrijven. Je hebt hierboven al een paar keer zo'n functie gebruikt. Bijvoorbeeld:  

  1. var mijnVariable = document.querySelector('h1');
  2. alert('hallo!');

Deze functies, document.querySelector en alert, zijn in de browser ingebouwd. Ze zijn er voor jou om te gebruiken wanneer je wil. 

Als je iets ziet dat eruitziet als de naam van een variabele maar met haakjes  — () — erachter, dan is het waarschijnlijk een functie. Functies krijgen vaak argumenten — stukjes data die ze nodig hebben om hun job te doen. Deze staan tussen de haakjes. Als er meerdere zijn,  worden ze met komma's van elkaar gescheiden.

De alert() functie bijvoorbeeld laat een pop-up-invoerveld in de browser verschijnen, maar we moeten de functie een string als argument geven om alert() te vertellen wat hij in het pop-up-invoerveld moet schrijven.

Het goede nieuws is dat je je eigen functies kan definiëren — in het volgende voorbeeld schrijven we een eenvoudige functie die twee nummers als argumenten krijgt en die die vermenigvuldigt. (Let er wel op dat we het Engelse function moeten schrijven,  Javascript kent geen Nederlandse woorden al kan je ze wel Nederlandse namen geven).

function vermeniguldigen(num1,num2) {
  var resultaat = num1 * num2;
  return resultaat;
}

Kopiëer de volgende functie in je console en probeer dan de nieuwe functie een paar keer uit te voeren, bijvoorbeeld:

vermenigvuldigen(4,7);
vermenigvuldigen(20,20);
vermenigvuldigen(0.5,3);

Opmerking: De return verklaring vertelt de browser om de resultaatvariabele als opbrengst van de functie terug te geven zodat we die waarde ergens anders kunnen gebruiken. ('to return' betekent terugkeren in het Nederlands. In zekere zin doet de functie dat ook want met 'return' verlaat je de functie. Het werkwoord heeft echter nog een tweede betekenis en die is 'opbrengen', 'opleveren' of 'teruggeven'. De resultaatwaarde is als het ware de winst van de functie). Dit is noodzakelijk omdat variabelen die in functies worden gedefiniëerd enkel beschikbaar zijn binnen die functies. Dat noemen we het toepassingsgebied van de variable of variable scoping in het Engels. Het woord scope is alomtegenwoordig en je kan er veel resultaten mee googelen dus ik zal het blijven gebruiken in deze Nederlandse vertaling. (Lees meer over variable scoping.)

Events

Om echte interactiviteit op je website te creëren heb je gebeurtenissen nodig. Opnieuw gaan we de Engelse term events gebruiken omdat die gewoon overal wordt gebruikt en googelmatig veel lekkerder werkt.  Events zijn codestructuren die naar dingen luisteren die in de browser gebeuren en je dan toestaan om code uit te voeren als reactie op die dingen. Het meest voor de hand liggende voorbeeld is het klik event, dat wordt afgevuurd door de browser als je muis op iets klikt. Om dit te demonstreren kan je het volgende in je console invoeren en vervolgens op de webpagina in je browser klikken:

document.querySelector('html').onclick = function() {
    alert('Au! Hou op met me te porren!');
}

Er zijn vele manieren om een event aan een element vast te maken. Hier selecteren we het HTML-element en dan zetten we zijn onclick handler (i.e. afhandelaar of manager) eigenschap gelijk aan een anonieme (i.e. naamloze) functie die de code bevat die we willen uitvoeren als het klik-event gebeurt. 

Let wel op het volgende:

document.querySelector('html').onclick = function() {};

is het equivalent van

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

Het is gewoon wat korter.

We gaan onze voorbeeldwebsite wat extra vuurkracht geven

Nu we een paar basisbegrippen van Javascript hebben behandeld, kunnen we een paar coole basiseigenschappen aan onze voorbeeldsite toevoegen zodat je een idee krijgt van wat er zoal mogelijk is.

Een afbeeldingswisselaar toevoegen 

In dit gedeelte gaan we nog een afbeelding en wat eenvoudige Javascript aan onze website toevoegen. Met JS gaan we ervoor zorgen dat de twee afbeeldingen elkaar afwisselen als er op de afbeelding word geklikt. 

  1. Eerst en vooral zoek je nog een afbeelding die je graag op je website zou willen zien. Zorg ervoor dat de afbeelding ongeveer dezelfde grootte heeft als je eerste afbeelding.
  2. Sla de afbeelding op in je afbeeldingenmap.
  3. Ga naar je main.js bestand en voer de volgende Javascriptcode in. (Als je "hallo wereld!" code er nog steeds in zit, verwijder je die.)
    var mijnAfbeelding = document.querySelector('img');
    
    mijnAfbeelding.onclick = function() {
        var mijnSrc = mijnAfbeelding.getAttribute('src');
        if(mijnSrc === 'afbeeldingen/firefox-icon.png') {
          mijnAfbeelding.setAttribute ('src','afbeeldingen/firefox2.png');
        } else {
          mijnAfbeelding.setAttribute ('src','afbeeldingen/firefox-icon.png');
        }
    }
  4. Sla al je bestanden op en laad index.html in de browser. Als je nu op de afbeelding klikt, zou die in de andere moeten veranderen!

Wat doen we in deze code? We slaan een verwijzing naar ons afbeeldingselement in de mijnAfbeelding-variabele op. Daarna, zetten we de onclick event handler van de variabele gelijk aan een anonieme functie (eentje zonder naam dus). Telkens als er nu op de afbeelding wordt geklikt, worden de volgende taken uitgevoerd:

  1. We halen de waarde van het src-attribuut van de afbeelding op.
  2. We gebruiken een voorwaarde om te controleren of de src-waarde gelijk is aan het pad naar de originele afbeelding:
    1. Als dat zo is, veranderen we de src-waarde in het pad naar de tweede afbeelding en zo wordt de tweede afbeelding in het  <image>-element geladen.
    2. Als dat niet zo is (wat wil zeggen dat de afbeelding al is veranderd), veranderen we de  src-waarde terug in het originele pad van de eerste afbeelding zodat de eerste afbeelding opnieuw te zien is. 

Een gepersonaliseerde welkomstboodschap toevoegen

Nu gaan we nog een stuk code toevoegen. De code zal de titel van de pagina wijzigen zodat er ook een gepersonaliseerde welkomstboodschap in staat als de gebruiker de site voor de eerste keer opent. Deze welkomstboodschap zal bewaard blijven als de bezoeker de site verlaat om later terug te komen.  We zullen er ook een optie in steken die de bezoeker toelaat zijn gebruikersnaam te veranderen en dus ook de welkomstboodschap als dat nodig is.

  1. In index.html voeg je net voor het <script>-element de volgende regel toe:
    <button>Verander gebruiker</button>
  2. In main.js voeg je onderaan het bestand de volgende code toe, exact zoals dieis geschreven. De code grijpt een referentie naar de nieuwe knop (de button dus) die we hebben toegevoegd en nog een referentie naar de hoofding. Deze referenties worden beide opgeslagen in variabelen :
    var mijnKnop = document.querySelector('button');
    var mijnHoofding= document.querySelector('h1');
  3. Voeg nu de volgende functie toe om de gepersonaliseerde groet in te stellen — dit zal nog niet echt iets doen, maar we zullen hem later gebruiken:
    function stelNaamIn() {
      var mijnNaam = prompt('Voer je naam in alsjeblieft');
      localStorage.setItem('naam', mijnNaam);
      mijnHoofding.textContent = 'Mozilla is cool, ' + mijnNaam;
    }
    Deze functie bevat een prompt() functie, die een dialoogvenster laat verschijnen. Het lijkt op alert() behalve dat prompt() de gebruiker vraagt om data in te voeren en die data in een variabele opslaat nadat de gebruiker op OK heeft gedrukt. In dit geval vragen we de bezoeker om zijn naam in te voeren. Daarna maken we gebruik van een API die localStorage (lokale opslag) heet en die ons toestaat data in de browser op de slaan, klaar voor later gebruik. We gebruiken de localStorage's setItem()-functie om een gegevenselement dat 'naam' heet te creëren en op te slaan. Het zal de waarde die de functie teruggeeft, gelijkstellen aan de mijnNaam-variabele die de naam bevat die de bezoeker heeft ingevoerd. Tenslotten stellen we de textContent van de heading gelijk aan een string ('Mozilla is cool, ') plus de naam van de gebruiker. 
  4. Vervolgens voeg je dit if ... else blok toe — we zouden dit de initialisatiecode kunnen noemen want het zet de app op terwijl de website voor de eerste keer wordt geladen :
    if(!localStorage.getItem('naam')) {
      stelNaamIn();
    } else {
      var opgeslagenNaam = localStorage.getItem('naam');
      mijnHoofding.textContent = 'Mozilla is cool, ' + opgeslagenNaam;
    }
    Dit blok gebruikt eerst een negatieoperator die de voorwaarde ontkent (logisch NIET) om te controleren of het een naam gegevenselement bestaat. Als dat niet zo is, wordt de setUserName() functie uitgevoerd om naam te creëren. Als naam wel bestaat,  d.w.z. de gebruiker heeft naam tijdens een vorig bezoek ingesteld, halen we de opgeslagen naam op met  getItem() en stellen we de  textContent van de hoofding gelijk aan een string plus de naam van de gebruiker, net zoals we in stelNaamIn()deden.
  5. Tenslotte stel je de onclick event handler in op de knop zodat de stelNaamIn() functie wordt uitgevoerd als er op de knop wordt geklikt. Dit staat de gebruiker toe een nieuwe naam in te voeren door op de knop te klikken :
    mijnKnop.onclick = function() {
      stelNaamIn();
    }
    

Als je nu de site voor de eerste keer bezoekt, zal die je om je gebruikersnaam vragen en je dan een gepersonaliseerde boodschap geven. Je kan de naam wanneer je wil veranderen door op de knop te drukken. Als extra bonus, omdat de naam in localStorage is opgeslagen, blijft de naam bewaard nadat de site is gesloten zodat de gepersonaliseerde boodschap er nog altijd zal zijn als je de site opnieuw opent! 

Conclusie

Als je alle instructies in dit artikel hebt opgevolgd, zou je nu een pagina moeten hebben die er ongeveer zo uit ziet (je kan ook onze versie hier zien):

Als je vast raakt, kan je altijd je werk met ons voltooide voorbeeld op Github vergelijken.

We hebben nu slechts de eerste stappen op een lang Javascriptpad gezet. Als je van dit artikel hebt genoten en je je studie graag zou verdiepen, ga dan naar onze JavaScript Guide.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: mientje, psinke1974, apreinders
 Laatst bijgewerkt door: mientje,