🕸️
[BA] Web Programming
  • Introductie
  • Cursus
    • TypeScript
      • Waarom TypeScript?
      • Nieuw project
      • Wat is een tsconfig.json?
      • Input lezen
      • Type Systeem
        • Basic types
        • Arrays
        • Functions
        • Class
        • Interface
      • Conditionele blok
      • Loops
      • Array methods
      • Exceptions
      • Modules
      • Asynchroon Programmeren
        • Promises
        • Async/Await
        • Fetch
        • JSON
    • Frontend
      • DOM Manipulatie
      • VITE
      • Deployment met Surge
    • Backend
      • Express.js
        • Basis
        • Nodemon
        • Statische Bestanden
        • Request
        • Response
        • Router
      • MySQL
    • Fullstack
      • Van Form tot Database
      • CORS
  • Labos
    • 1. TS: Basis
      • Hello Name
      • BMI Calculator
      • Interest Calculator
      • Uren en Minuten
      • Wisselgeld
      • Name from Email
      • Text Box
    • 2. TS: Arrays & functions
      • Som van getallen
      • Math Fun
      • Array Sum
      • Puntenboek
      • Rot13
      • Pokemon Team
      • Todo List String
      • Tick Tac Toe
      • BMI Calculator Multi
    • 3. TS: Interfaces & classes
      • Recepten
      • Transportmiddelen
      • Movies
      • Filter Numbers
    • 4. TS: Async & fetch
      • Promise All
      • Slow Sum
      • Cocktails Promise All
      • Joke API
      • School API
      • Cocktails API
      • Unix Timestamp API
    • 5. TS: Modules & NPM
      • Math Module
      • Cowsay Module
      • Cat GPT
      • Rainbow Chalk
    • 6. Frontend: VITE & DOM
      • Verander achtergrond
      • Verander tekst
      • Verander divs
      • Verander kleuren
      • Verander kleuren random
    • 7. Frontend: APIs & DOM
      • Cocktail API met Vite
      • Weather API
      • Uitvinders
      • Rick and Morty
    • 8. Backend: Express & Requests
      • Hello Express
      • DadJoke Express
      • Reiskosten server
    • 9. Backend: MySQL & Routing
      • Reiskosten server
      • Taken server
      • Taken server met prioriteit
    • 10. Fullstack: Forms & Express & MySQL
      • Reiskosten app
      • Taken app
      • Pokémon app
Powered by GitBook

AP

On this page
  • if / else
  • switch / case
  • Logische operatoren
  1. Cursus
  2. TypeScript

Conditionele blok

Wanneer we logica inbouwen om te bepalen of een stuk code onder bepaalde voorwaarden / condities mag uitgevoerd worden, spreken we over een conditionele blok.

We bekijken twee manieren : de if / else structuur en de switch / case structuur.

if / else

In de meest simpele vorm controleren we één conditie die bepaalt of een stuk code mag uitgevoerd worden.

const dayInWeek : string = readline.question("Welke dag is het vandaag?");
if (dayInWeek == "zondag") {
    console.log("Uitslapen!");
}

Meestal zal bij de conditie ook een alternatief code blok worden meegegeven : wat als het niét waar is.

const dayInWeek : string = readline.question("Welke dag is het vandaag?");
if (dayInWeek == "zondag") {
    console.log("Uitslapen!");
} else {
    console.log("Om 7u00 opstaan...");
}

Belangrijk in de if / else structuur is dat je de blokken code die bij de conditie horen tussen accolades zet.

Het is ook mogelijk om meerdere if / else condities te combineren op deze manier:

const dayInWeek : string = readline.question("Welke dag is het vandaag?");
if (dayInWeek == "zondag") {
    console.log("Uitslapen!");
} else if (dayInWeek == "zaterdag") {
    console.log("Om 9u00 opstaan en studeren");
} else if (dayInWeek == "woensdag") {
    console.log("Om 8u00 opstaan en naar school gaan");
} else {
    console.log("Om 7u00 opstaan en naar school gaan");
}

Alhoewel het perfect mogelijk is om tot in het oneindige if / else if / else condities te blijven schrijven, begint dit al snel heel onoverzichtelijk te worden.

Om dit op te lossen hebben we onze tweede conditionele structuur.

switch / case

De switch / case structuur komt het best tot zijn recht als we voor één conditie meerdere mogelijkheden hebben, zoals in het voorbeeld hierboven.

const dayInWeek : string = readline.question("Welke dag is het vandaag?");
switch (dayInWeek) {
    case "zondag":
        console.log("Uitslapen!");
        break;
    case "zaterdag":
        console.log("Om 9u00 opstaan en studeren");
        break;
    case "woensdag":
        console.log("Om 8u00 opstaan en naar school gaan");
        break;
    default:
        console.log("Om 7u00 opstaan en naar school gaan");
        break;
}

Door deze structuur is de leesbaarheid van de code sterk verbeterd én het is ook veel makkelijker om een extra conditie toe te voegen.

Opgelet ! Je kan de switch / case structuur enkel gebruiken indien de conditie met de 'gelijk aan' operator vergeleken wordt.

Belangrijk ! Het keyword break zorgt ervoor dat een case eindigt. Zet je geen break, dan zal de volgende case ook nog uitgevoerd worden.

Logische operatoren

Om condities op te stellen hebben we beschikking over logische operatoren. Denk eraan dat bij switch / case enkel de gelijk aan operator gebruikt wordt.

Betekenis
Operator
Voorbeeld

Gelijk aan

==

a == b

Ontkenning (not)

!

!(a == b)

Niet gelijk aan

!=

a != b

Kleiner dan

<

a < b

Groter dan

>

a > b

Kleiner of gelijk aan

<=

a <= b

Groter of gelijk aan

>=

a >= b

Logische AND

&&

a && b

Logische OR

||

a || b

PreviousInterfaceNextLoops

Last updated 7 months ago