1. Syntax & controlestructuren

JavaScript is ontstaan als scripting taal die gebruikt wordt om interactiviteit toe te voegen aan webpagina's. Door de jaren heen is JavaScript geëvolueerd tot een volwaardige programmeertaal die gebruikt wordt voor het ontwikkelen van server-side applicaties, websites, webapplicaties, mobiele applicatie en desktop applicaties.

In deze cursus focussen we ons op de basisprincipes, het bouwen van websites. Alhoewel we al wel enkele geavanceerdere build tools zullen gebruiken, gaan we hier niet te diep op in en blijft de focus bij eenvoudige websites.

Door de cursus heen bespreken we hoe je JavaScript gebruikt om elementen toe te voegen, te wijzigen en te verwijderen op een webpagina. Om te reageren op acties van een gebruiker, om formulieren te valideren, om modale vensters te tonen, ...

De implementaties van JavaScript die voorzien zijn in moderne browsers en runtimes voldoen aan de ECMA-262 standaard. Deze standaard evolueert zeer snel en dat betekent dat niet alle features die in de laatste standaard beschreven zijn ook automatisch beschikbaar zijn in alle browsers. Via bronnen als MDN kan je nagaan welke features in welke browsers beschikbaar zijn.

Script uitvoeren

JavaScript kan natuurlijk in de browser uitgevoerd worden, dit doen we echter pas vanaf hoofdstuk 4. De eerste paar lessen focussen we ons op de basisprincipes en voeren we de scripts uit via Bun. Meer informatie over de installatie vind je in het hoofdstuk over de development environment.

Om een script uit te voeren moet je volgende stappen doorlopen. Je opent Visual Studio Code en maakt vervolgens een nieuw bestand aan, in de screenshots hieronder gebruiken we de naam hello_world.js met onderstaande inhoud.

console.log('Hello World');

Vervolgens open je een nieuwe terminal in Visual Studio Code.

Figuur 0: Open de terminal in VS Code

Om het script uit te voeren moet je in de terminal het commando bun uitvoeren met als argument de naam van het script.

Figuur 0: Bun script uitvoeren

Syntax regels

De syntax regels die we gebruiken binnen de JavaScript leerlijn zijn ietwat anders dan de stijlregels die je in de C# leerlijn gebruikt. We sommen de belangrijkste regels hieronder op.

• Lijnen kunnen afgesloten worden met een puntkomma, maar dit is niet verplicht.
• Strings kunnen zowel met enkele als dubbele quotes.
• JavaScript is case-sensitive, let dus op hoofdletter gebruik
  • Functies, methodes en variabelen beginnen met een kleine letter
  • Klassen en interfaces beginnen met een hoofdletter
• Variabelen kunnen letters, cijfers, underscores en dollartekens bevatten, maar mogen niet beginnen met een cijfer.
• Commentaar kan toegevoegd worden met
  • // voor enkele lijn commentaar
  • /* commentaar */ voor meerdere lijnen commentaar

Variabelen

Om variabelen te definiëren in JavaScript zijn er twee keywords die je kan gebruiken, const en let.

Begrip: Const vs. let

In JavaScript kunnen variabelen aangemaakt worden via de const en let keywords. Het verschil tussen beide is dat een variabele die aangemaakt is met const niet meer gewijzigd kan worden nadat deze een waarde heeft gekregen. Een variabele die aangemaakt is met let kan wel gewijzigd worden.

Maak zoveel mogelijk gebruik van const om variabelen aan te maken, dit heeft enkele belangrijke voordelen:

• De code is beter leesbaar, je weet dat een variabele nooit een nieuwe waarde zal krijgen.
• De code is kwalitatiever, het is zelden nodig om een variabele aan te passen nadat deze gedeclareerd is.

Variable declareren met const

const foo = "An exmple string variable";

// Onderstaande lijn zorgt voor een error.
// foo = "A new value";

Variable declareren met let

let foo = "An exmple string variable";

// Onderstaande lijn is geldige JavaScript code.
foo = "A new value";

:::

Datatypes

JavaScript definieert verschillende datatypes, zowel alle types zijn herkenbaar uit de lessen Programming Essentials. De beschikbare types zijn: number, boolean, string, object, undefined en null. Merk op dat JavaScript geen onderscheid maakt tussen integers en floats, alles wordt opgeslagen als een number. Ook tussen strings en characters wordt geen onderscheid gemaakt, een character is gewoon een string met lengte 1.

De waarde null duid aan dat een variabele expliciet geen waarde heeft terwijl undefined aangeeft dat een variabele niet bestaat of enkel gedeclareerd is maar nog geen waarde gekregen heeft.

Om strings te declareren kunnen

Begrip: Template literal

Een template literal is een string die variabelen bevat en gedefinieerd wordt tussen backticks (``). Via ${} kan je variabelen invoegen in de string.

const foo = "An exmple string variable";
const bar = `A template literal containing other variables like ${foo}`;

Operatoren

JavaScript bevat alle operatoren die je kent uit de lessen Programming Essentials. Daarbovenop zijn er enkele extra operatoren die je kan gebruiken.

Begrip: Operatoren

Rekenkundige operatoren

Operator	Omschrijving
*	Vermenigvuldiging
/	Deling
+	Optelling
-	Aftrekking
%	Modulus (rest na gehele deling)
++	Increment (verhoog met 1)
--	Decrement (verminder met 1)
**	Machtsverheffing
+=	Optelling en toekenning
-=	Aftrekking en toekenning
*=	Vermenigvuldiging en toekenning

Vergelijkingsoperatoren

Operator	Omschrijving
==	Gelijk aan, datatype is niet belangrijk, volgens deze operator is "1" == 1 waar.
===	Gelijk aan, datatype is belangrijk, volgens deze operator is "1" == 1 niet waar. Gebruik bij voorkeur altijd deze operator.
<	Kleiner dan.
>	Groter dan.
<=	Kleiner of gelijk aan.
>=	Groter of gelijk aan.
!=	Niet gelijk aan, datatype is niet belangrijk.
!==	Niet gelijk aan, datatype is belangrijk.

Logische operatoren

Operator	Omschrijving
&&	En
||	Of
!	Niet

Geavanceerde operatoren

Operator	Omschrijving	Voorbeeld
??	Nullish coalescing operator, geeft de rechtenwaarde als de linkerwaarde null of undefined is anders de linkerwaarde.	null ?? "default" geeft "default" terug. 'a' ?? 'default' geeft 'a'terug
?.	Optionele chaining operator, roept een methode of eigenschap aan als de linkerwaarde bestaat.	foo?.bar?.baz roept baz aan als foo en bar bestaan.
? :	Ternary operator, een verkort if-else statement.	condition ? value1 : value2 geeft value1 terug als condition waar is, anders value2.

:::

Invoer & uitvoer

Via het console object kan je informatie tonen in de console van de browser of de terminal waarin je het script uitvoert. Het object heeft verschillende methodes die data uitprinten op verschillende log-niveaus. Doorgaans gebruiken we de log methode om informatie te tonen, maar je kan ook de warn, error en debug methodes gebruiken.

Om informatie in te lezen die door de gebruiker ingegeven wordt, kan je gebruik maken van de prompt methode. Afhankelijk van de runtime (browser of bun) toont deze functie een visueel element waarin de gebruiker tekst kan ingeven of een console prompt. Deze functie heeft twee parameters, via de eerste parameter geef je een vraag mee die aan de gebruiker gesteld wordt en via de tweede optionele parameter geef je een standaardwaarde mee.

Informatie wordt als tekst in gegeven, dus als je een getal verwacht moet je dit nog omzetten naar een getal.

Om bevestiging te vragen aan de gebruiker kan je de confirm methode gebruiken. Deze methode toont een dialoogvenster met een OK en Cancel knop in de browser of een console prompt in bun. Het resultaat van de methode is een boolean die aangeeft of de gebruiker op OK of Cancel geklikt heeft.

const name = prompt('What is your name?', 'John Doe');
const age = Number(prompt('How old are you?', '30'));
const canProgram = confirm('Can you program in JavaScript?');

if (canProgram) {
  console.log(`Hello ${name}, you are ${age} years old and you can program in JavaScript.`)
} else {
  console.log(`Hello ${name}, you are ${age} years old and you cannot program in JavaScript.`)
}

Voorwaardelijke instructies

JavaScript bevat dezelfde controlestructuren als de meeste andere programmeertalen.

Begrip: Conditionele statements

Conditionele statements zijn statements die een bepaald blok code uitvoeren als een bepaalde voorwaarde waar is.

If statement met één voorwaarde

if (voorwaarde) {
  // voer instructie(s) uit indien voorwaarde waar is
}

If-else statement met één voorwaarden

if (voorwaarde) {
  // voer instructie(s) uit indien voorwaarde waar is
} else {
  // anders voer instructie2 uit
}

If-else statement met meerdere voorwaarden

if (voorwaarde1) {
  // voer instructie(s) uit indien voorwaarde1 waar is.
} else if (voorwaarde2) {
  // voer instructie(s) uit indien voorwaarde2 waar is.
} else {
  // anders voer deze instructie(s) uit
}

Ternary expression

(voorwaarde) ? instructie indien waar : instructie indien niet waar ;

:::

Als alternatief kan je ook een switch gebruiken.

Lussen

Begrip: Lussen

We onderscheiden drie soorten iteraties.

Een begrensde herhaling (for) kan gebruikt als je exact weet hoeveel keer je een lust wilt uitvoeren.

Een onbegrensde herhaling (while) kan gebruikt worden als je niet weet hoeveel keer de lus uitgevoerd moet worden. De lus neemt een conditie als argument, zolang de conditie waar is, wordt de lus uitgevoerd.

De (do-while) lus is een onbegrensde herhaling die minstens één keer wordt uitgevoerd. Ook al is de conditie onwaar, wordt de lus toch minstens één keer uitgevoerd.

Begrensde herhaling

// Algemene syntax
for ( startwaarde ; eindwaarde ; verhoging ) {
  // herhaalt n-maal dezelfde instructie.
}

// Praktisch voorbeeld

for (let i = 0; i < 3; i++) {
  console.log(`Lus ${i + 1}`)
}

Onbegrensde herhaling

while(voorwaarde){
  // Herhaal tot de voorwaarde false wordt.
}

let count = 1;
let i = 1;
while (i !== 0) {
  console.log(`Lus ${count}`); 
  i = Math.round(Math.random())
  count++;
}

Onbegrensde herhaling met minstens één uitvoering

do {
  // Herhaal tot de voorwaarde false wordt.
  // Gebeurd minstens één keer omdat de voorwaarde pas op het einde gecontroleerd wordt.
} while(voorwaarde);

:::

Meestal moet een lus tot het einde uitgevoerd worden, maar af en toe moet een lus vroegtijdig afgebroken worden. Dit kan via break en continue

Begrip: Break & continue

Het kan af en toe nuttig zijn om een lus vroegtijdig te beëindigen of een iteratie over te slaan.

Stel dat je in een grote dataset moet zoeken of bepaalde elementen aanwezig zijn of juist niet aanwezig zijn. Dan kan je natuurlijk door elke element in de dataset gaan, maar zodra je het element gevonden hebt, doet de rest van de dataset er niet meer toe. In dit geval kan je best het break statement gebruiken om de lus te beëindigen, zo is je programma sneller.

Continue is vooral nuttig om je code beter leesbaar te maken. Soms moet heel wat code enkele uitgevoerd worden in een bepaald geval. Je kan dan natuurlijk een conditioneel statement gebruiken en de conditionele code daar in steken. Dit betekent echter dat je code dieper genest is en slechter leesbaar, zeker als deze conditionele code nog andere conditionele code bevat. In de plaats daarvan kan je de code onder het conditioneel statement zetten en het continue statement gebruiken in de if.

Figuur 0: Break & continue

Functies

Begrip: Break & continue

Een functie is een manier om code af te zonderen. Er zijn verschillende redenen om dit te doen. Enerzijds zijn functies heel handig om code die verschillende keren uitgevoerd moet worden slechts één keer neer te schrijven. Anderzijds bevorderen functies de leesbaarheid van je code, ook als de code slechts één keer uitgevoerd wordt.

Een functie wordt gedefinieerd via het function keyword en kan eventueel parameters bevatten. In verschillende situaties is het handig om parameters optioneel te maken en een defaultwaarde mee te geven. Zo moet je, als je de functie oproept, enkel een waarde meegeven voor de parameter als je afwijkt van de standaard situatie.

Functies kunnen behandeld worden als variabelen, je kan ze dus doorgeven aan andere functies, in een array bewaren, ... Om een functie als een variable te behandelen moet je de naam van de functie gebruiken zonder ronde haakjes.

Een functie heeft regelmatig een andere functie nodig als parameter. We kunnen, zoals hierboven besproken, een functie als variabele doorgeven door de ronde haakjes weg te laten en de naam van de functie te gebruiken. Maar regelmatig is de functie die je als parameter doorgeeft uniek en ga je deze nooit opnieuw gebruiken. In dit geval kan je een anonieme functie gebruiken, dit is een functie zonder naam.

Functie met twee verplichte parameters

function generateGreeting(name, age) {
  return `Hello ${name}, you are ${age} years old .`;
}

console.log(generateGreeting('John Doe', 30));
console.log(generateGreeting('Jane Doe', 25, 'Master in Computer Science'));

Functie met twee verplichte parameters en één optionele parameter

function generateGreeting(name, age, education = 'Gegradueerde in het programmeren') {
  return `Hello ${name}, you are ${age} years old and you are working towards the '${program}' degree.`;
}

console.log(generateGreeting('John Doe', 30));
console.log(generateGreeting('Jane Doe', 25, 'Master in Computer Science'));

Functie als variabele

function execute10Times(func) {
  for (let i = 0; i < 10; i++) {
    // Door hier de ronde haakjes te gebruiken wordt de functie uitgevoerd.
    func();
  }
}

function printGreeting() {
  console.log('Hello world!');
}

// De functie printGreeting wordt hier als variabele doorgegeven aan execute10Times.
execute10Times(printGreeting);

Anonieme functie

function execute10Times(func) {
  for (let i = 0; i < 10; i++) {
    // Door hier de ronde haakjes te gebruiken wordt de functie uitgevoerd.
    func();
  }
}

// Het argument van execute10Times is een anonieme functie.
// De functie bestaat enkel in de scope van execute10Times en heeft geen naam.
execute10Times(function () {
  console.log('Hello world!');
});

:::

Voorbeeldcode

Uitgewerkt lesvoorbeeld met commentaar