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

Wat is JavaScript eigenlijk echt?

JavaScript ("JS" afgekort) is een volwaardige dynamische programmeertaal die u kunt 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.

U kunt zo'n beetje alles met JavaScript. U zult beginnen met simpele toevoegingen zoals carrousels, plaatjescollecties, veranderende layouts, en reacties als er op een knop wordt gedrukt. Als u wat meer ervaring met de taal hebt opgedaan, zult u 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 u op uw HTML kunt 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 u er wat beter in wordt, zullen uw sites een nieuwe dimensie van kracht en creativiteit betreden.

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

Belangrijk: Wanneer u de rest van deze cursus nog niet gevolgd hebt, download dan deze voorbeeldcode en gebruik het als uitgangspunt. Bekijk de pagina in uw browser voordat u verder gaat.

  1. Ga naar de scriptsmap van uw testsite en maak een nieuw bestand dat uw main.js. noemt. Sla het op in uw 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 uw main.js-bestand:
    var mijnHoofding = document.querySelector('h1');
    mijnHoofding.textContent = 'Hallo wereld!';
  5. Tot slot zorgt u ervoor dat uw HTML- en JavaScriptbestanden opgeslagen zijn en laadt u index.html in de browser. U 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 uw script onder de HTML te plaatsen.

Wat is er gebeurd?

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

Vervolgens verandert u de waarde van de textContent-eigenschap van mijnHoofding in "Hallo wereld!" (met textContent kunt u de tekstinhoud van de hoofding (h1) veranderen).

Opmerking: De twee functies die u 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 u een paar basiseigenschappen van de Javascript-taal uitleggen zodat u beter begrijpt hoe alles werkt. Sterker nog, deze begrippen worden standaard in alle programmeertalen gebruikt. Als u deze basis begrijpt, zou u in staat moeten zijn om ongeveer alles te programmeren! 

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

Variabelen

Variabelen zijn containers waarin u waarden kunt bewaren. U begint door uw variabele te declareren met het var-sleutelwoord. Dat wordt dan gevolgd door de naam die u aan uw variabele geeft. U kunt zelf kiezen welke:

var mijnVariabele;

Opmerking: Alle verklaringen in JavaScript moeten op een puntkomma eindigen, om aan te duiden waar de verklaring eindigt. Als u er geen puntkomma's in plaatst, kunt u onverwachte resultaten krijgen.

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

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

Nadat u een variabele hebt gedeclareerd, kunt u hem een waarde geven:

mijnVariabele = 'Bob';

Als u dat wenst, kunt u deze twee operaties op dezelfde lijn uitvoeren:

var mijnVariabele = 'Bob';

U kunt de waarde van de variabele ophalen door de naam van de variabele te noteren en op 'Enter' te drukken:

mijnVariabele;

Nadat u de variabele een waarde hebt gegeven, kunt u 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 u die tussen aanhalingstekens zetten. var mijnVariabele = 'Bob';
Nummer Een nummer. Nummers worden niet omringd 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 u toestaat om meerdere waarden in in één enkele referentie op te slaan (een lijst). 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 u leert.   var mijnVariable = document.querySelector('h1');
Alle voorbeelden hierboven ook.

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

Commentaren

U kunt commentaren in uw JavaScript-code plaatsen, net zoals u dat in CSS kunt:

/*
Alles ertussen is een commentaar.
*/

Als uw 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 kunt u een paar van de eenvoudigste operatoren zien, met een paar voorbeelden ernaast die u in uw Javascript-console kunt 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 kunt u rekenen. -, *, / 9 - 3;
8 * 2; // vermenigvuldigen is een asterisk in JS
9 / 3;
toewijzingsoperator Dit hebt u 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 op van wat erop volgt. 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. U vindt een complete lijst in Expressies en operators.

Opmerking: Als u datatypes met elkaar vermengt, kunt u vreemde resultaten krijgen als u berekeningen doet. Wees dus voorzichtig en verwijs correct naar uw variabelen zodat u de resultaten krijgt die u verwacht. Voer bijvoorbeeld "35" + "25" in uw console in. Waarom ziet u niet het resultaat dat u verwacht? De aanhalingstekens veranderen de nummers in strings. U eindigt dus met aaneengeplakte strings in plaats van opgetelde nummers. Als u  35 + 25 invoert, zult u 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, voert u het eerste codeblok uit. Zo niet, dan slaat u die code over en voert u het tweede codeblok uit dat na de else-verklaring staat.

Functies

Functies zijn een manier om functionaliteit te verpakken, die u opnieuw wilt gebruiken. Wanneer u de functie wilt gebruiken, kunt u die aanroepen met zijn naam en hoeft u niet constant de hele code te herschrijven. U 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 u om te gebruiken wanneer u wilt. 

Als u 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 werk 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 u uw eigen functies kan definiëren — in het volgende voorbeeld schrijven we een eenvoudige functie die twee nummers als argumenten krijgt en die de twee nummers vermenigvuldigt. Let er wel op dat we het Engelse function moeten schrijven, Javascript kent geen Nederlandse woorden, al kunt u ze wel Nederlandse namen geven.

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

Kopiëer de volgende functie in uw 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 dat hij de resultaatvariabele als opbrengst van de functie terug moet geven, zodat we die waarde ergens anders kunnen gebruiken.

In het Nederlands betekent 'to return' terugkeren . In zekere zin doet de functie dat ook, want met 'return' verlaat u 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. (Lees meer over variable scoping.)

Events

Om echte interactiviteit op uw website te creëren hebt u gebeurtenissen nodig ('Events' in het Engels). Events zijn codestructuren die naar dingen luisteren die in de browser gebeuren en u 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 uw muis ergens op klikt. Om dit te demonstreren kunt u het volgende in uw console invoeren en vervolgens op de webpagina in uw browser klikken:

document.querySelector('html').onclick = function() {
    alert('Au! Houd 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 eigenschap 'onclick handler' (i.e. afhandelaar of manager) gelijk aan een anonieme (i.e. naamloze) functie die de code bevat die we willen uitvoeren als het klik-event gebeurt. 

Let wel op dat het volgende:

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

het equivalent is 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 u 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 wordt geklikt. 

  1. Zoek eerst nog een afbeelding die u graag op uw website zou willen zien. Zorg ervoor dat de afbeelding ongeveer dezelfde grootte heeft als uw eerste afbeelding.
  2. Sla de afbeelding op in uw afbeeldingenmap.
  3. Ga naar uw main.js-bestand en voer de volgende Javascriptcode in (Als uw "hallo wereld!"-code er nog steeds in zit, verwijder die dan).
    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 uw bestanden op en laad index.html in de browser. Als u 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 plaatsen die ervoor zorgt dat de bezoeker zijn gebruikersnaam kan veranderen en dus ook de welkomstboodschap als dat nodig is.

  1. In index.html voegt u net voor het <script>-element de volgende regel toe:
    <button>Verander gebruiker</button>
  2. In main.js voegt u onderaan het bestand de volgende code toe, exact zoals die is geschreven. De code grijpt een referentie naar de nieuwe knop (de button) 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 uw naam in');
      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 voegt u 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 gegevenselement naam 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 stelt u 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 u nu de site voor de eerste keer bezoekt, zal die u om uw gebruikersnaam vragen en u dan een gepersonaliseerde boodschap geven. U kunt de naam veranderen wanneer u wilt, door op de knop te drukken. Als 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 u de site opnieuw opent! 

Conclusie

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

Als u vast komt te zitten, kunt u altijd uw werk met ons voltooide voorbeeld op Github vergelijken.

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

Documentlabels en -medewerkers

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