Go with the flow....

Validatie: nested if

Bij het programmeren van een inlogsysteem is validatie een essentieel onderdeel. Validatie houdt in dat gecontroleerd wordt of de invoer van een gebruiker correct is. Denk hierbij aan het controleren of een gebruikersnaam bestaat en of het ingevoerde wachtwoord overeenkomt met de gebruiker die wil inloggen.

Een veelgebruikte programmeerstructuur hiervoor is de geneste if-structuur (nested if). Dit betekent dat een if-statement zich binnen een ander if-statement bevindt. Bij een inlogsysteem werkt dit bijvoorbeeld als volgt:

  • Eerst wordt gecontroleerd of de gebruikersnaam voorkomt in een lijst met bekende gebruikers.
  • Als de gebruikersnaam juist is, wordt gecontroleerd of het wachtwoord overeenkomt met de gebruikersnaam.
  • Afhankelijk van de invoer krijgt de gebruiker een bericht:
    • Onbekende gebruikersnaam
    • Verkeerd wachtwoord
    • Succesvolle login
 

💡 Nested if
In deze oefening analyseer je een stukje code dat inlogvalidatie uitvoert. Daarnaast bekijk je een flowchart die de werking van zo’n inlogsysteem visualiseert. Door de flowchart en de code te vergelijken, leer je hoe een geneste if-structuur wordt toegepast in zowel visuele als geschreven vorm.

HTML

				
					    <input type="text" name="username" id="username" value="" placeholder="username">
    <input type="text" name="password" id="password" value="" placeholder="password">
    <input type="submit" name="login" id="login" value="inloggen">
    <div id = "resultaat"></div>

JavaScript

				
					$(document).ready(function(){

    let gebruikers = {
        "SonneStraal": "sonne123",
        "BlijeBloem": "blije123",
        "LachendeLente": "lachende123",
        "VrijeVogel": "vrije123",
        "ZonZegen": "zon123",
        "StralendeSter": "stralende123"
    };

    $('#login').click(function(){
        checkLogin();
    });

    var checkLogin = function(){

        let user = $("#username").val();
        let pw = $("#password").val();

        if(gebruikers.hasOwnProperty(user)){ 

            if(pw === gebruikers[user]){ 
                $("#resultaat").html("Welkom " + user + pass);
            } else {
                $("#resultaat").html("Controleer je password!");
            }
        } else {
            $("#resultaat").html("Controleer username!");
        }
    }
});

Flowchart

welcome to paradise Adam and Eve!

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.
  • Maak de pagina op met CSS.

 

📌 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?

Knockin' on Heavens For Loop

Flowcharts zijn een krachtig hulpmiddel om de logica van een programma visueel weer te geven. Ze helpen programmeurs bij het structureren van hun code en maken het eenvoudiger om herbruikbare oplossingen te ontwerpen. Door processen schematisch weer te geven, wordt het makkelijker om patronen te herkennen en code efficiënt te organiseren. Dit bevordert niet alleen het hergebruik van code, maar draagt ook bij aan overzichtelijke en goed onderhoudbare programma’s.

Bij het gebruik van een for-loop in een flowchart spelen de volgende stappen een rol:

  • Variabelen worden gedeclareerd en geïnitialiseerd.
  • Een iterator wordt gedeclareerd en geïnitialiseerd.
  • De code waarin klop wordt toegevoegd aan song wordt drie keer herhaald.
  • Hemelpoort wordt toegevoegd aan song.
  • Song wordt weergegeven in de user interface.
 

💡 De loop
Voor de for-loop wordt een iterator (bijvoorbeeld i) gedeclareerd en geïnitialiseerd. Deze iterator bepaalt hoe vaak een codeblok wordt uitgevoerd. Zolang aan de voorwaarde wordt voldaan (TRUE), blijft de loop doorgaan en verandert de waarde van de iterator. Zodra de voorwaarde niet meer geldt (FALSE), stopt de loop en gaat de flowchart verder naar de volgende stap.

JavaScript

				
					 $(document).ready(function(){

    const klop = " knock";
    const hemelpoort = "in' on heavens door";
    let song = "";

    for(var i = 0 ; i < 3 ; i++){
        song += klop;
    }
    song += hemelpoort;
    /*song += additionele informatie*/
    $("#resultaat").append("<h1>"+song+"</h1>");
    
});

Flowchart

i = 0;

song = ""

knock knock knockin' on heavens door

Opdracht

Bestudeer het script van de countdown widget. Zorg dat je begrijpt hoe de for loop en het of-statement werken.

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

  • Maak de flowchart 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.
  • Maak de pagina op met CSS.

 

📌 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?

				
					$(document).ready(function(){
    function startCountdown() {
        for (let i = 5; i >= 0; i--) {
            setTimeout(function(){
                if (i > 0) {
                    $("#countdowndiv").html("<h1>" + i + "</h1>");
                } else {
                    $("#countdowndiv").html("<h1>Liftoff! 🚀</h1>");
                }
            }, (5 - i) * 1000);
        }

        // Wacht 6 seconden (iets langer dan de countdown) en start opnieuw
        setTimeout(startCountdown, 8000);
    }

    startCountdown(); // Start de eerste countdown
});

Predifined Process: hergebruik code

De Predefined Process Shape in een flowchart wordt gebruikt om een bestaande procedure of functie aan te duiden die elders in het programma is gedefinieerd. Dit helpt om de flowchart overzichtelijk te houden, doordat complexe of herhaalde processen als één enkele stap worden weergegeven.

In de gegeven code vertegenwoordigt de Predefined Process Shape de functie verwerkGetallen, die wordt aangeroepen wanneer de gebruiker op de knop met id submit klikt.

In plaats van alle details van de berekening in de hoofdflow op te nemen, wordt deze als een vooraf gedefinieerd proces weergegeven. Dit zorgt voor een duidelijke en overzichtelijke flowchart.

Door de functie als een Predefined Process Shape weer te geven, wordt benadrukt dat het een herbruikbaar proces is dat op meerdere plaatsen in het programma kan worden aangeroepen. Dit maakt de flowchart eenvoudiger te lezen en te begrijpen.

JavaScript

				
					$(document).ready(function(){

    $('#submit').click(function(){
        verwerkGetallen();
    });
    
    var verwerkGetallen = function(){
        let getallen = $("#getallen").val();
        let getalArray = getallen.split(",").map(Number);
        let som = 0;
    
        for(var i = 0 ; i < getalArray.length ; i++){
            som += getalArray[i];
        }
        
        $("#resultaat").html("<h1>"+som+"</h1>");
    }
});

Flowchart

De som van de getallen is 15

Opdracht

Bestudeer het script van de countdown widget. Zorg dat je begrijpt hoe de Predefined Process Shape in de flowchart weergegeven wordt.

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

  • Bedenk een functionele aanvulling voor het script.
  • Maak de flowchart (met de aanvulling) 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.
    Ook in de code maak je de uitbreiding van het script.
  • 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.
  • Maak de pagina op met CSS.

 

📌 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?