Go with the flow....

Declareren en initialiseren

In de afbeeldingen zie je twee flowcharts die het proces weergeven van het tonen van een bericht in een gebruikersinterface (UI). De eerste flowchart laat een directe uitvoering zien, terwijl de tweede flowchart een extra stap bevat: het declareren en initialiseren van een variabele.

Eerste flowchart:

  • Het proces start.
  • Een melding met de tekst “Hallo Schakel” wordt direct in de UI weergegeven.
  • Het proces eindigt.

Tweede flowchart:

  • Het proces start.
  • Een variabele bericht wordt gedeclareerd en direct geïnitialiseerd met de waarde “Hallo Schakel”.
  • De waarde van de variabele wordt weergegeven in de UI.
  • Het proces eindigt.

 

Belangrijke concepten

  • Declareren: Een variabele wordt aangemaakt, maar heeft nog geen waarde.
  • Initialiseren: Een variabele krijgt een waarde toegewezen.

In de tweede flowchart zijn deze stappen gecombineerd in één actie. Dit betekent dat de variabele direct een waarde krijgt op het moment dat deze wordt aangemaakt. Dit is vaak efficiënter en maakt de code overzichtelijker.

Deze vergelijking laat zien hoe het gebruik van variabelen helpt bij het organiseren en hergebruiken van gegevens in een programma. Door variabelen te gebruiken, kun je waarden flexibel aanpassen zonder dat je de code op meerdere plekken hoeft te wijzigen.

💡 Tip: Let goed op welke flowchart-symbolen je gebruikt voor verschillende acties. Elk symbool heeft een specifieke betekenis binnen een algoritme.

Van flowchart naar code

In de codeblokken hieronder zie je hoe de flowcharts worden omgezet in werkende code. Vergelijk de code met de flowcharts en probeer te begrijpen hoe elke stap in het algoritme wordt vertaald naar een programmeertaal.

Flowcharts en JavaScript

				
					$(document).ready(function(){
   
   $("#wrapper").html("<h1>Hallo Schakel</h1>");

});
				
			
				
					$(document).ready(function(){
   
   const bericht = "<h1>Hallo Schakel</h1>";
   $("#wrapper").html(bericht);

});

Resultaat in UI

Van invoer naar uitvoer: een basisproces

Flowchart

N = toedeledoki

toedeledoki

Deze flowchart toont een proces waarbij een gebruiker een waarde invoert. Deze waarde wordt vervolgens opgeslagen in een variabele en weergegeven in de console of op de webpagina. Dit is een basisvoorbeeld van hoe invoer en variabelen werken in een programmeertaal zoals JavaScript.

💡 Klik op de groene start-shape om het proces stap voor stap te doorlopen.

Stap-voor-stap proces

  • Start
    Het proces begint.

  • Invoer (A = Input)
    De gebruiker voert een waarde in, bijvoorbeeld via een invoerveld of een prompt.

  • OK-knop
    De gebruiker bevestigt de invoer door op de OK-knop te klikken.
    In het script wordt dit afgehandeld met een event listener, die de functie updateUserInterface aanroept.

  • Declaratie en Initialisatie (N = A)
    Een variabele met de naam N wordt gedeclareerd en de ingevoerde waarde A wordt aan N toegekend (initialisatie).

  • Output (Output N)
    De waarde van N wordt weergegeven op de HTML-pagina of in de console.

  • Eind
    Het proces stopt.

Belangrijke concepten

✅ Declaratie – Een variabele wordt aangemaakt.
✅ Initialisatie – De variabele krijgt een waarde toegewezen.
✅ Invoer en uitvoer – De gebruiker voert gegevens in, en het programma verwerkt en toont de gegevens.

Door dit proces te volgen, zie je hoe invoer, variabelen en uitvoer samenwerken in een programma. Dit vormt de basis voor veel toepassingen in JavaScript en andere programmeertalen.

HTML

				
					<input type="text" name="invoer" id="invoer" value="" placeholder="Voer iets in">
    <input type="submit" name="submit" id="submit" value="Input naar UI">
    <div id = "resultaat"></div>

JavaScript

				
					$(document).ready(function(){
   
    $('#submit').click(function(){
        updateUseInterface();
    });

    var updateUseInterface = function(){
        let tekst = $("#invoer").val();
        $("#resultaat").html(tekst);
    };

});

Opdracht

Bestudeer de flowchart en vergelijk deze met het bijbehorende script. Zorg dat je begrijpt hoe elke stap in de flowchart wordt omgezet naar code.

💡 Zodra je het proces goed hebt begrepen, voer je de volgende opdracht uit:

  • Maak de flowchart na in Lucidchart.
  • Exporteer de flowchart als een JPG- of PNG-bestand.
  • Maak op je laptop een nieuw JavaScript-project.
  • Neem de code uit het voorbeeld over en implementeer deze in je project.
  • Plaats de afbeelding van je flowchart in de HTML-pagina van je project.
  • Beschrijf het proces van de flowchart in gewone taal.
    • Leg in je eigen woorden uit wat er gebeurt in elke stap.
    • Zorg ervoor dat elke stap uit de flowchart wordt meegenomen in je uitleg.

📌 Tip: Stel je voor dat je het proces uitlegt aan iemand die nog nooit met flowcharts of JavaScript heeft gewerkt. Hoe maak je het helder en begrijpelijk?

Goedemorgen, goedemiddag: if...

Flowchart

Deze flowchart toont een proces waarbij twee variabelen worden gedeclareerd en geïnitialiseerd. Vervolgens wordt de huidige tijd opgeslagen in een variabele, waarna alleen het uur uit deze tijd wordt gefilterd en in een nieuwe variabele wordt bewaard.

Op basis van de waarde van het uur wordt een controle uitgevoerd. Afhankelijk van het resultaat wordt de user interface (UI) bijgewerkt met een passend bericht.

In de animatie wordt niet de computertijd opgehaald. In plaats daarvan kun je zelf een tijd invoeren, zodat je verschillende scenario’s kunt testen.

👉 Klik op de groene start-shape om te beginnen.

Processtappen in de flowchart

  • Start
    Het proces begint.
  • Declaratie en Initialisatie (am en pm)
    Twee variabelen am en pm worden gedeclareerd en krijgen de waarden "bon dia" en "bon tardi".
  • Huidige tijd opslaan
    • Een variabele nu wordt gedeclareerd en gevuld met de actuele tijd.
    • Een variabele uur wordt gedeclareerd en krijgt de uurwaarde uit nu.
  • Beslissing (if-statement)
    De waarde van uur wordt gecontroleerd:
    • Als uur < 12 (TRUE): De waarde van am wordt weergegeven in de HTML-pagina.
    • Als uur ≥ 12 (FALSE): De waarde van pm wordt weergegeven in de HTML-pagina.
  • Eind
    Het proces stopt.

Belangrijke concepten

✅ Decision (Beslissing): In een flowchart wordt een if-structuur weergegeven met een decision-shape (ruitvorm).
✅ Twee uitgangen: Een decision-shape heeft altijd twee paden: TRUE en FALSE (meestal gelabeld als “Yes” en “No”).
✅ UI-update: De juiste tekst wordt dynamisch weergegeven op basis van de ingevoerde tijd.

📌 Vergelijk de flowchart met de bijbehorende codeblokjes en zie hoe het proces in JavaScript wordt geïmplementeerd

 

HTML

				
					
    <div id = "resultaat"></div>

JavaScript

				
					 $(document).ready(function(){

    const am = "bon dia";
    const pm = "bon tardi";

    let nu = new Date();
    let uur = now.getHours();

    if(uur < 12){
        $("#resultaat").html(am)
    }else{
         $("#resultaat").html(pm)
    }
});

Opdracht

Bestudeer de flowchart en vergelijk deze met het bijbehorende script. Zorg dat je begrijpt hoe elke stap in de flowchart wordt omgezet naar code.

💡 Zodra je het proces goed hebt begrepen, voer je de volgende opdracht uit:

  • Maak de flowchart na in Lucidchart.
  • Exporteer de flowchart als een JPG- of PNG-bestand.
  • Maak op je laptop een nieuw JavaScript-project.
  • Neem de code uit het voorbeeld over en implementeer deze in je project.
  • Plaats de afbeelding van je flowchart in de HTML-pagina van je project.
  • Beschrijf het proces van de flowchart in gewone taal.
    • Leg in je eigen woorden uit wat er gebeurt in elke stap.
    • Zorg ervoor dat elke stap uit de flowchart wordt meegenomen in je uitleg.

📌 Tip: Stel je voor dat je het proces uitlegt aan iemand die nog nooit met flowcharts of JavaScript heeft gewerkt. Hoe maak je het helder en begrijpelijk?

En anders....: else if

Flowchart

In het blok “Goedemorgen goedemiddag” ontbreekt de mogelijkheid van de avond. Er word in een if gecontroleerd of het vóór 12 uur ‘s middags is en als dat niet het geval is wordt de rest van de dag in een else afgehandeld. Binnen die else zou onderscheid gemaakt kunnen worden in middag en avond. Laten we even onderzoeken hoe een if else en in een flowchart uit ziet.

Ook in deze animatie voer je zelf een tijd in. In het script wordt in plaats daarvan de computertijd opgehaald en in een variabele opgeslagen.

👉 Klik op de groene start-shape om te beginnen.

Processtappen in de flowchart

  • Start
    Het proces begint.

  • Declaratie en Initialisatie (am en pm en ev )
    De variabelen am, pm en ev worden gedeclareerd en krijgen de waardes “bon dia”, “bon tardi” en “bon nochi” toegewezen (initialisatie).

  • Variabele nu wordt gedeclareerd, de actuele tijd wordt opgehaald en in nu opgeslagen.
    Variabele uur wordt gedeclareer. Het uur wordt uit nu gehaald en in uur opgeslagen

  • Input naam
    De gebruiker voert zijn of haar naam in, bijvoorbeeld via een invoerveld.

  • OK-knop
    De gebruiker bevestigt de invoer door op de OK-knop te klikken.
    In het script is dit terug te vinden als een event listener, waarin de functie sayHello wordt aangeroepen.

  • Declaratie en Initialisatie (n = input)
    Een variabele met de naam n wordt gedeclareerd en krijgt de ingevoerde waarde toegewezen (initialisatie).

  • In een if-statement wordt gecontroleerd of de waarde van hours kleiner is dan 12
    Als de vergelijking TRUE is wordt am weergegeven in de html pagina.
    Als de vergelijking FALSE is maken we een tweede controle (else if).
    Als de vergelijking in else if TRUE is wordt pm weergegeven in de html pagina.
    Als de vergelijking in else if FALSE is wordt ev weergegeven in de html pagina.

  • Output (Output N)
    Afhankelijk van het resultaat wordt dus de waarde van am, pm of ev in de HTML pagina weergegeven.

  • Eind
    Het proces stopt.

Belangrijke concepten

✅ Decisions: Op deze manier wordt een if – else if aangegeven in een flowchart
✅ Elke decision shape heeft altijd twee paden naar buiten. TRUE en FALSE.
✅ Met 2 dicision shapes zijn er dus 3 uitkomsten mogelijk

📌 Vergelijk de flowchart met de bijbehorende codeblokjes en zie hoe het proces in JavaScript wordt geïmplementeerd.

HTML

				
					
<input type="text" name="invoer" id="invoer" value="" placeholder="Naam">
<input type="submit" name="submit" id="submit" value="Input naar UI">
<div id = "resultaat"></div>

JavaScript

				
					$(document).ready(function(){

    $('#submit').click(function(){
        sayHello();
    });

    var sayHello = function(){
        am = "bon dia ";
        pm = "bon tardi ";
        ev = "bon nochi ";

        let n = $("#invoer").val();

        let now = new Date();
        let hours = now.getHours();

        if(hours < 12){
            $("#resultaat").html(am + tekst)
        }else if(hours >= 12 && hours < 19){
             $("#resultaat").html(pm + n)
        }else{
            $("#resultaat").html(ev + n)
        }
    }
});

Opdracht

Bestudeer de flowchart en vergelijk deze met het bijbehorende script. Zorg dat je begrijpt hoe elke stap in de flowchart wordt omgezet naar code.

💡 Zodra je het proces goed hebt begrepen, voer je de volgende opdracht uit:

  1. Maak de flowchart na in Lucidchart.
  2. Exporteer de flowchart als een JPG- of PNG-bestand.
  3. Maak op je laptop een nieuw JavaScript-project.
  4. Neem de code uit het voorbeeld over en implementeer deze in je project.
  5. Plaats de afbeelding van je flowchart in de HTML-pagina van je project.
  6. Beschrijf het proces van de flowchart in gewone taal.
    • Leg in je eigen woorden uit wat er gebeurt in elke stap.
    • Zorg ervoor dat elke stap uit de flowchart wordt meegenomen in je uitleg.

📌 Tip: Stel je voor dat je het proces uitlegt aan iemand die nog nooit met flowcharts of JavaScript heeft gewerkt. Hoe maak je het helder en begrijpelijk?