Coderen is niet zo ingewikkeld als je denkt

Coderen en programmeren. Voor veel mensen staat het kunnen communiceren met computers via nullen en enen gelijk aan magie. Voor niet-programmeurs hangt er vaak een sluier van mysterie rond developers en hun kunsten. Dit komt deels door een flinke lading vakjargon waar een leek zich dood van schrikt en deels omdat programmeurs er lekker op gaan over te komen als technische wonderkinderen. Eigenlijk is het concept van programmeren in de basis niet zo heel ingewikkeld meer. Dat was vroeger wel anders! In dit artikel neem ik je graag mee door de basis van HTML, CSS en Javascript, zodat je voortaan weet hoe jouw website in elkaar steekt en waar een programmeur het precies over heeft als hij tracht je verwarren met interessant klinkende vaktermen.

HTML

HyperText Markup Language, oftewel HTML, is de basis van elke website. Hierin wordt de opmaak van een pagina bepaald door stukjes content op te delen in handige groepen. Vergelijk HTML vooral met de inrichting van een huis. Een huis bevat meerdere kamers met verschillende doelen en elke kamer bevat weer kasten met verschillende spullen. Misschien zitten er in die kast wel weer lades met vakjes, enzovoorts. Met HTML bepaalt een programmeur in welk kastje en welk laatje op de website bepaalde teksten en afbeeldingen staan. Ook geef je in HTML aan welke tekst klikbaar is als linkje, of welke tekst op de pagina dient als titel of ondertitel.

Al in de HTML van een website wordt de fundering gelegd voor de vindbaarheid van jouw website. Een netjes ingerichte website is immers makkelijk door zoekmachines zoals Google te begrijpen. Goed om te noemen is dat HTML schrijven niet hetzelfde is als programmeren. HTML is dus niet een programmeertaal, maar dient enkel voor de opmaak van een website.

In HTML kunnen aan alle aangemaakt groepen zogenaamde klassen worden meegegeven. Dat zijn namen die vervolgens in de CSS worden gebruikt om die groepen van styling te voorzien.

CSS

Cascading Style Sheets worden gebruikt om jouw website er mooi uit te laten zien. Ook dit is geen programmeertaal, maar daardoor niet minder belangrijk. Als in de HTML van een site wordt aangegeven dat een bepaalde groep tekst de naam “intro” heeft, kun je in CSS bijvoorbeeld bepalen dat alles met de naam “intro”, rode tekst met lettergrootte 18 bevat. CSS is dus de verf in de kamers van je huis en bepaalt welke kastjes waar komen te staan.

Javascript

Nu zijn we aangekomen bij een echte programmeertaal. Javascript kan worden vergeleken met de elektriciteit en waterleidingen in je huis. Zonder javascript kom je op veel websites een eind, maar zodra je wat complexere logica dan enkel teksten en kleuren nodig hebt, is Javascript je beste vriend. Javascript zorgt er op een website bijvoorbeeld voor dat je door een slideshow met afbeeldingen kunt navigeren of dat je een video af kunt spelen.

Ik leg hieronder de betekenis van een aantal veelvoorkomende termen uit.

Variabelen

In programmeertalen (er zijn er namelijk veel meer dan alleen Javascript), wordt veel gebruik gemaakt van variabelen. Hierin wordt een stukje informatie opgeslagen dat herbruikt kan worden. Als alle afbeeldingen na 400 miliseconden op een website mogen verschijnen kun je die 400 opslaan in een variabele. Later hoef je wijzigingen dan alleen op die ene plek toe te passen, in plaats van overal in de code.

Om code netjes te houden zijn er verschillende soorten variabelen. Commentaar dat veel developers hebben op Javascript, is dat deze taal het gebruik van die soorten niet afdwingt. Andere talen doen dat vaak wel. Een paar types variabelen zijn:

• Boolean, altijd een ‘waar’ of ‘niet waar’ waarde. Denk bij een slider bijvoorbeeld aan autoplay: true / false.
• Integer, hele getallen zoals 1, 2, 30, 400.000.
• Array, een lijst met verschillende soorten informatie. Bijvoorbeeld alle artikelen in je blog.
• String, een stukje tekst.

Een loop (spreek uit als loep)

Er zijn verschillende soorten loops, maar in de basis doen ze allemaal hetzelfde. Ze voeren een bepaalde actie een bepaal aantal keren uit. Zo kun je bijvoorbeeld door een array (zie hierboven) ‘loopen’ om iets met die data te doen. Loops worden vaak gebruikt om data op te zoeken in een array of om data te (her)sorteren.

API

Application programming interface. Dit is een veelvoorkomende, maar soms complexe integratie van Javascript. Een API maakt het mogelijk meerdere systemen met elkaar te koppelen. Ik ga hier niet de diepte in over hoe een API gebouwd kan worden, maar bijvoorbeeld het inladen van producten van Bol.com in jouw webshop gaat via een API.

Functie

Een stukje code (ook wel een script genoemd) kan worden verzameld in een functie, die dan op meerdere plekken aangeroepen kan worden. Het besturen van een video op een pagina kan bijvoorbeeld met play, pause en stop functies. Als je in de HTML dan klikt op het filmpje zou je de play functie aan kunnen roepen.

Conclusie

Ik hoop met je dit artikel een inzicht te hebben gegeven in de code die achter jouw website zit. Heb je nog een vraag of opmerking? Neem dan vooral even contact op.