JavaScript leren: gratis cursus voor beginners met 30-dagenplan

JavaScript is de enige programmeertaal die elke browser van huis uit uitvoert. JavaScript leren betekent dus leren hoe je een webpagina tot leven wekt: reageren op een klik, een formulier controleren, gegevens laden zonder de pagina te herladen. Deze gids is de voordeur van de JavaScript-tutorial van Gekkode: hij vertelt je waar je begint, in welke volgorde je verdergaat, hoeveel tijd je moet inplannen en waaraan je merkt dat je vooruitgaat.

Hij richt zich op complete beginners en net zo goed op wie al eens JavaScript heeft gekopieerd zonder het echt te begrijpen. Programmeerervaring is niet nodig. De cursus is gratis, in het Nederlands, en elk hoofdstuk eindigt met een oefening.

Waarom je vandaag JavaScript leert

Drie praktische redenen, zonder marketingpraat:

• Het staat overal op het web. Een etalagesite, een webshop, een bedrijfsapplicatie: zodra een pagina meer doet dan tekst tonen, zit er JavaScript achter. Het is de taal van de browser, en de browser is de meest verspreide uitvoeringsomgeving ter wereld.
• Het houdt niet op bij de browser. Met Node.js schrijf je in dezelfde taal servers, commandoregeltools en automatiseringsscripts. Je leert niet één taal voor de front-end en een andere voor de rest.
• De leerlus is meteen zichtbaar. Je schrijft drie regels, je herlaadt de pagina, je ziet het resultaat. Geen compilatie, geen ingewikkelde installatie: een tekstbestand en een browser volstaan om te beginnen.

Code-assistenten hebben één ding veranderd: ze schrijven snel middelmatige JavaScript. Ze hebben niets veranderd aan het feit dat je die code moet begrijpen om hem te herstellen, te herlezen en te laten meegroeien. De basis blijft de beste investering.

Wat je moet weten voordat je begint

Het strikt noodzakelijke, niet meer:

• Een beetje HTML en CSS. Weten wat een tag, een attribuut en een class zijn. Is dat niet zo, dan volstaat één dag over de basis van HTML om deze cursus te volgen; opmaak hoef je niet te beheersen.
• Een code-editor. Visual Studio Code is gratis en kleurt JavaScript zonder instellingen. Elke editor voor platte tekst werkt ook.
• Een recente browser met zijn ontwikkelaarsconsole (toets F12). De console is je eerste gereedschap: ze toont de resultaten en vooral de fouten, met het nummer van de regel die misgaat.

Node.js, npm of een framework hoef je voor de twaalf hoofdstukken niet te installeren. Dat gereedschap komt wanneer je al kunt programmeren.

De cursus stap voor stap: twaalf hoofdstukken op volgorde

Het programma volgt een bewuste opbouw: elk hoofdstuk gebruikt alleen wat de vorige hebben ingevoerd. Reken op twintig tot veertig minuten per hoofdstuk, oefening inbegrepen.

1. Inleiding tot JavaScript: waar je een script in een HTML-pagina zet, de tag script, een eerste ‘Hello World’ en de console.
2. Variabelen en datatypes: let, const, strings, getallen, booleans, undefined en null.
3. Operatoren en expressies: rekenen, vergelijken (=== in plaats van ==), logica, tekst samenvoegen en template literals.
4. De voorwaarden: if, else, switch en de ternaire operator.
5. De loops: for, while, for…of en forEach op arrays.
6. De functies: declaratie, parameters, retourwaarde, arrow functions en scope van variabelen.
7. De objecten: eigenschappen aanmaken, uitlezen, wijzigen, doorlopen en verwijderen.
8. Het object Math: afronden, willekeurige getallen, minimum en maximum.
9. De HTML-pagina bewerken: een element selecteren, zijn tekst en zijn classes wijzigen, elementen aanmaken en verwijderen (het DOM).
10. De events: reageren op een klik, op invoer en op het versturen van een formulier met addEventListener.
11. De ES6-modules: de code opsplitsen over bestanden met import en export.
12. Eindproject: een raadspel: alles wat voorafgaat, samengebracht in een spelletje dat je in de browser speelt.

De volledige inhoudsopgave, met je voortgang, blijft zichtbaar in de linkerkolom van elk hoofdstuk.

Je eerste JavaScript-programma, met commentaar

Voor hoofdstuk 1 zie je hier hoe een volledig JavaScript-programma eruitziet. Probeer niet alles te begrijpen: herken alleen de vijf ideeën die de cursus gaat uitwerken.

// 1. Gegevens: een array van objecten
const panier = [
  { nom: 'Clavier', prix: 49.9, quantite: 1 },
  { nom: 'Souris', prix: 19.5, quantite: 2 },
];

// 2. Een functie: een herbruikbare berekening
function totalHT(articles) {
  let total = 0;
  for (const article of articles) {        // 3. Een loop
    total += article.prix * article.quantite;
  }
  return total;
}

// 4. Een voorwaarde
const ht = totalHT(panier);
const fraisDePort = ht >= 50 ? 0 : 4.9;

// 5. Een weergave
console.log(`Total HT : ${ht.toFixed(2)} €`);
console.log(`Frais de port : ${fraisDePort.toFixed(2)} €`);
console.log(`Total TTC : ${((ht + fraisDePort) * 1.2).toFixed(2)} €`);

Resultaat in de console:

Total HT : 88.90 €
Frais de port : 0.00 €
Total TTC : 106.68 €

Gegevens, een functie, een loop, een voorwaarde, een weergave: elk programma, hoe groot ook, is uit deze bouwstenen gemaakt. Hoofdstuk 2 begint bij de eerste, de variabelen.

Een leerplan van dertig dagen

Dit plan gaat uit van één uur per dag, vijf dagen per week. Verplicht is er niets aan: het is een tempo dat ruimte laat om te oefenen zonder te vergeten wat je de dag ervoor zag.

Twee regels maken dit plan doeltreffend: de oefening van het vorige hoofdstuk opnieuw maken voordat je het volgende opent, en elk voorbeeld zelf typen in plaats van het te kopiëren.

Vijf oefeningen voor beginners

Te maken in de console van de browser of in een bestand exercices.js. De uitwerkingen gebruiken alleen de hoofdstukken 1 tot 7.

1. Omrekenen: schrijf een functie celsiusVersFahrenheit(c) die de omgerekende temperatuur teruggeeft (formule: c * 9 / 5 + 32). Controleer dat celsiusVersFahrenheit(100) de waarde 212 teruggeeft.
2. Even of oneven: toon voor elk getal van 1 tot 20 ‘even’ of ‘oneven’ in de console. Tip: de operator % geeft de rest van een deling.
3. De grootste: schrijf maximum(tableau), die de grootste waarde uit een array met getallen teruggeeft, zonder Math.max te gebruiken.
4. Klinkers tellen: schrijf compterVoyelles(texte); ‘JavaScript’ moet 3 geven.
5. Adresboek: maak een array met drie objecten { nom, ville } en toon dan één zin per persoon met een template literal.

Uitwerking van de oefeningen 1, 3 en 4:

function celsiusVersFahrenheit(c) {
  return c * 9 / 5 + 32;
}
console.log(celsiusVersFahrenheit(100)); // 212

function maximum(tableau) {
  let max = tableau[0];
  for (const valeur of tableau) {
    if (valeur > max) {
      max = valeur;
    }
  }
  return max;
}
console.log(maximum([3, 17, 8, 42, 5])); // 42

function compterVoyelles(texte) {
  let total = 0;
  for (const lettre of texte.toLowerCase()) {
    if ('aeiouy'.includes(lettre)) {
      total += 1;
    }
  }
  return total;
}
console.log(compterVoyelles('JavaScript')); // 3

Heeft oefening 3 zich verzet, dan is dat normaal: ze vraagt om een waarde te onthouden tijdens een loop. Dat is precies de vaardigheid die hoofdstuk 5 aanleert.

Hoelang duurt het om JavaScript te leren?

De vraag komt bij elke start terug, en het eerlijke antwoord hangt af van wat je ‘leren’ noemt:

• Een bestaand script lezen en aanpassen: één tot twee weken bij één uur per dag.
• Zelf een klein interactief programma schrijven (formulier, rekenmachine, eenvoudig spel): drie tot vier weken, dat is het doel van deze cursus.
• Zelfstandig werken aan een echt project, met gegevens van elders en een framework: meerdere maanden regelmatig oefenen.

Het verschil zit niet in het aantal uren maar in de regelmaat. Elke dag dertig minuten is meer waard dan vier uur op zondag.

JavaScript, Python of TypeScript?

Python leest helemaal in het begin makkelijker en is uitstekend voor gegevens en scripts. Maar is het web je doel, dan kom je niet om JavaScript heen: geen enkele andere taal draait in de browser. De twee sluiten elkaar niet uit; begin met de taal die past bij wat je wilt bouwen.

TypeScript is JavaScript met types. Het komt daarna, niet in de plaats: alles wat je hier ziet, blijft gelden in TypeScript, en types begrijp je veel beter zodra je de fouten hebt meegemaakt die ze voorkomen.

Gratis bronnen om verder te gaan

• De documentatie van MDN, in het Frans: de referentie om open te laten staan, elke methode wordt er met voorbeelden uitgelegd.
• javascript.info, in het Engels: de meest volledige onlinecursus, handig zodra je een punt wilt uitdiepen.
• De JavaScript-artikelen van Gekkode voor het vervolg: de classes, bind, call en apply, een string omzetten naar een getal, een e-mailadres controleren met een regex.
• En zit de taal eenmaal in je vingers, dan is er de Vue 3-tutorial om een framework te ontdekken.

Voor een werkwijze vult het artikel 5 tips om efficiënt te leren deze gids aan.

Veelgestelde vragen

Moet ik iets installeren? Nee. Een teksteditor en een browser volstaan voor de twaalf hoofdstukken.

Zijn Java en JavaScript hetzelfde? Nee. Het zijn twee talen zonder verband; de naam is een historisch ongelukje uit 1995.

Kun je JavaScript leren zonder HTML te kennen? De hoofdstukken 1 tot 8 vragen bijna geen HTML. Vanaf hoofdstuk 9 wordt het nodig om een HTML-pagina te kunnen lezen.

Welke browser gebruik je? Chrome, Firefox, Edge of Safari in een recente versie. Alle vier hebben een ontwikkelaarsconsole en voeren de moderne JavaScript van deze cursus uit.

Waar begin je? Bij hoofdstuk 1, Inleiding tot JavaScript: twintig minuten tot je eerste bericht in een webpagina.