Basiscursus javascript en jQuery

Wat is een flowchart?

Een flowchart maken voordat je begint met programmeren helpt je om het probleem dat je wilt oplossen, goed te begrijpen en in overzichtelijke stappen op te splitsen. In een flowchart teken je elke stap van je programma uit in de juiste volgorde. Hierdoor zie je vooraf welke beslissingen er gemaakt moeten worden, welke acties er nodig zijn, en hoe ze met elkaar verbonden zijn.

Het voordeel? Je weet al wat je moet coderen en je kunt fouten opsporen of onduidelijkheden oplossen vóórdat je begint te programmeren. Dit bespaart tijd en helpt je om gestructureerder en met minder fouten te werken aan je code.

Voorbeelden

Hier volgen 3 voorbeelden van flowcharts. Naast de afbeelding staat het probleem dat opgelost moet worden.
Bestudeer de flowcharts en de problemen.

Het probleem

In een array staan 5 dieren.
parkiet,choco, eend, leguaan en termiet.
Met een for-loop moeten de dieren één voor één in de console worden gelogd.

Het probleem

Aan de gebruiker wordt gevraagd hoe het weer vandaag is.
De opties waaruit gekozen kan worden zijn: regen, bewolkt en zon.
Afhankelijk van de input wordt en een zin in de console gelogd.
Welke zin gelogd wordt moet worden bepaald met een if – else if – else statement.

  • Optie 1: Regen! Tijd voor je regenjas, paraplu en een oppepper voor je humeur.
  • Optie 2: Bewolkt vandaag! Misschien een trui, maar toch geen regenjas nodig.
  • Optie 3: Het is zonnig! Zet je zonnebril op, pak een hoed en ga in korte broek naar buiten.

Het probleem

Er moet gecontroleerd worden of de dieren in de array (voorbeeld 1) kunnen vliegen.

Er moet dus een if statement in een for-loop gemaakt worden.
Voor elk dier in de array moet een zin worden gelogd waarin staat of het wel of niet kan vliegen

Er zijn twee opties:

  • Optie 1: Dier[i] kan wel vliegen.
  • Optie 2: Dier[i] kan niet vliegen.

Vormen, lijnen en kleuren

In flowcharts helpen vormen, kleuren en lijnen ons om ingewikkelde processen helder en overzichtelijk weer te geven. Elk element speelt een unieke rol: vormen geven verschillende stappen en acties aan, kleuren verbeteren de leesbaarheid en logica, en lijnen (pijlen) laten de volgorde van het proces zien. Door deze elementen op een doordachte manier te combineren, kunnen we een visuele weergave maken die niet alleen goed georganiseerd is, maar ook gemakkelijk te begrijpen voor iedereen. In dit hoofdstuk leer je hoe en wanneer we elk van deze onderdelen toepassen om duidelijke flowcharts te maken.

Ovaal (Terminator): Start en Eindpunt

  • Uiterlijk: Een ovale vorm.
  • Functie: Geeft het begin of het einde van een proces aan.
  • Gebruik: Plaats een ovaal aan het begin van de flowchart om het startpunt aan te geven, en aan het eind om het einde van het proces te markeren.
  • Voorbeeld: In een programmeerproces kan een ovaal het begin van een script aangeven, of het punt waar de code stopt.

Rechthoek (Process): Actie of Stap

  • Uiterlijk: Een gewone rechthoek.
  • Functie: Geeft een stap, actie, of bewerking aan die wordt uitgevoerd.
  • Gebruik: Gebruik een rechthoek om aan te geven wat er moet gebeuren in een bepaald deel van de code, zoals variabelen initialiseren, gegevens printen, of een functie uitvoeren.
  • Voorbeeld: Een for-loop of if statement kan in een rechthoek worden weergegeven om aan te geven dat dit een actie is .

Ruit (Decision): Beslissing of Voorwaarde

  • Uiterlijk: Een ruitvorm.
  • Functie: Geeft een vraag of beslissing aan die beantwoord moet worden met “ja” of “nee”.
  • Gebruik: Plaats een ruit wanneer er een keuze of conditie is in de code, bijvoorbeeld in een if-statement.
  • Voorbeeld: In een for-loop kan een ruit worden gebruikt om te controleren of alle elementen van een array zijn doorlopen..

Parallellogram: Invoer of Uitvoer

  • Uiterlijk: Een schuine rechthoek (parallellogram).
  • Functie: Geeft invoer (input) of uitvoer (output) van gegevens aan.
  • Gebruik: Wordt gebruikt om aan te geven wanneer er gegevens worden ingevoerd (bijvoorbeeld van de gebruiker) of worden uitgevoerd (bijvoorbeeld iets dat naar de console wordt gelogd).
  • Voorbeeld: Als er een stap is om iets in de console te loggen of een invoer van de gebruiker te vragen, zou je dit met een parallellogram kunnen weergeven.

Kleuren: Ondersteun de logica

Er zijn geen vaste afspraken voor het gebruik van kleuren in een flowchart, maar kleuren worden vaak ingezet om de leesbaarheid en het begrip te vergroten. Hier zijn enkele gangbare richtlijnen:

Consistente kleurcodering:

  • Gebruik één specifieke kleur voor elk type element.
    Bijvoorbeeld:
    • Start/Eindpunten (ovalen) kunnen groen zijn voor een begin en rood voor een einde.
    • Beslissingen (ruit) kunnen geel of oranje zijn om ze op te laten vallen als keuzemoment.
    • Acties/Processen (rechthoek) hebben vaak een neutrale kleur, zoals blauw of grijs.
  • Vermijd te veel kleuren:
    • Gebruik maximaal 4-5 kleuren om te voorkomen dat de flowchart te druk en verwarrend wordt. Te veel kleuren kunnen afleiden en het doel van de flowchart onduidelijk maken.
  • Kleurtoegankelijkheid:
    • Zorg ervoor dat kleuren voor iedereen leesbaar zijn, ook voor mensen met kleurenblindheid. Gebruik bijvoorbeeld kleuren met voldoende contrast en overweeg patronen of verschillende grijstinten als aanvulling.
    • Kleuren zijn dus vooral bedoeld om de structuur en logica van de flowchart te ondersteunen en helpen bij het snel onderscheiden van verschillende elementen en procesonderdelen.

Pijlen: Stroom van het Proces

  • Uiterlijk: Lijnen met een pijlpunt.
  • Functie: Geeft de richting van de stroom in het proces aan, waardoor duidelijk is wat de volgorde is van de stappen.
  • Gebruik: Gebruik pijlen om stappen met elkaar te verbinden en aan te geven welke route genomen moet worden, afhankelijk van de beslissing in een ruit.
  • Voorbeeld: Een pijl kan aangeven dat het proces na een beslissing doorgaat naar een andere actie of teruggaat naar het begin van een loop.

Opdracht

Kennis en vaardigheden

In deze opdracht ga je een flowchart maken in Lucidchart om een leuke situatie met een for-loop en een if – else if – else–statement te visualiseren. Het thema is een app die iemands humeur analyseert en een gepaste reactie geeft. Het doel is om een proces te maken waarin een loop herhaaldelijk een actie uitvoert, waarbij de actie per situatie verschilt.

Je maakt de opdracht op de website lucidchart. Je kunt daar inloggen met je google account.

Stap-voor-stap Instructies

  1. Het humeur:

    • Maak een lijst met drie woorden of korte zinnen die het humeur van de gebruiker beschrijven. Bijvoorbeeld:

      • Slaapwandelende zombie
      • Lachende zonnestraal
      • Eindeloze energiebom

  2. Maak de flowchart in Lucidchart:

    • Acties en condities: Gebruik de juiste vormen voor beslissingen, acties en eindpunten.
    • Gebruik kleuren om onderdelen van het proces te groeperen, zoals de if – else if – else-statement, of om belangrijke keuzes extra op te laten vallen.
    • Gebruik pijlen om de logische volgorde te verduidelijken.

  3. Opslaan als jpg: Wanneer je flowchart klaar is, sla je deze op als een jpg-bestand.

    • In Lucidchart kun je dit doen door naar File > Download > JPG te gaan.
      Bewaar het bestand in je map informatiekunde in Google drive.

Veel succes, en maak er iets moois van! 

  • Wat is een flowchart?
  • Wat is het doel/nut van een flowchart?