Go with the flow....

Calculator: subflowcharts

In deze opdracht ga je jouw vaardigheden trainen in het maken en begrijpen van flowcharts. Je krijgt een basisflowchart en een eenvoudige rekenmachine in HTML en JavaScript. Jouw taak is om de twee predefined process shapes verder uit te werken in subflowcharts.

Analyseer de gegeven code

  • Bekijk de HTML- en JavaScript-code. Begrijp hoe de rekenmachine werkt en welke stappen worden uitgevoerd.
  • Begrijp de predefined process shapes
    In de gegeven flowchart zie je twee predefined process shapes:
    • Operator buttons: Dit verwijst naar het proces waarin de operator-knoppen worden toegevoegd aan de interface.
    • Berekening uitvoeren: Dit verwijst naar het proces waarin de gebruiker een operator kiest en de berekening wordt uitgevoerd.
 

Werk de processen uit in subflowcharts

  • Je taak is om deze twee onderdelen verder uit te werken:
    • Hoe worden de operator buttons gegenereerd en weergegeven?
    • Wat gebeurt er precies in de functie bereken()?
    • Maak voor beide onderdelen een subflowchart waarin je de stappen gedetailleerd weergeeft.
 

Tips voor de aanpak

  • Analyseren: Lees de code goed door en probeer te begrijpen hoe de processen verlopen.
  • Decompositie: Splits het probleem op in kleinere, beheersbare stukken (bijvoorbeeld: invoer, verwerking, uitvoer).
  • Patronen herkennen: Zie je patronen in de manier waarop de knoppen worden gegenereerd en hoe de berekening wordt uitgevoerd?
  • Algoritmisch denken: Zet de processen om in een logisch gestructureerde flowchart.
  • Evalueren: Loop je flowchart stap voor stap door en controleer of alle stappen kloppen.
 

Veel succes!

HTML

				
					<p>voer 2 getallen in en kies een operator</p>
    <input type="text" name="getal1" id="getal1" value="" placeholder="getal 1">
    <input type="text" name="getal2" id="getal2" value="" placeholder="getal 2">
    <div id = "operatoren"></div>
    <div id = "resultaat"></div>

JavaScript

				
					$(document).ready(function(){
    
    let op, uitkomst, oper = ["+","-","x","÷"];
    for(let i = 0 ; i < oper.length ; i++){
        let bt = $("<h1 class = 'operator_button'>"+oper[i]+"</h1>");
        $("#operatoren").append(bt);
    }

    $('.operator_button').click(function(){
        op = $(this).text(); 
        bereken();
    });
    
    var bereken = function(){
        let getal1 = $("#getal1").val();
        let getal2 = $("#getal2").val();
        
        if( op == "+"){
            uitkomst  = Number(getal1) + Number(getal2)
        }else if( op == "-"){
            uitkomst  = Number(getal1) - Number(getal2)
        }else if( op == "x"){
            uitkomst  = Number(getal1) * Number(getal2)
        }else if( op == "÷"){
            uitkomst  = Number(getal1) / Number(getal2)
        }

        let som = getal1 + op + getal2 + " = " + uitkomst;
        
        $("#resultaat").html("<h1>"+som+"</h1>");
    }
});

Flowchart

Prototype

voer 2 getallen in en kies een operator

Opdracht

  • Maak de flowchart na in Lucidchart.
    Maak ook de flowcharts voor operatorBtns en rekenen
  • 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?