Basiscursus javascript en jQuery
Function declaration en Event listeners
In deze opdracht ga je aan de slag met het maken van een interactieve rekenapplicatie. Je gebruikt JavaScript en jQuery om berekeningen uit te voeren en de resultaten dynamisch op een webpagina te tonen. Het doel is om een script te schrijven dat twee ingevoerde getallen verwerkt en automatisch de som, het verschil, het product en het quotiënt van deze getallen berekent en weergeeft.
Bij het maken van dit project leer je:
- Hoe je een functie declareert.
- Hoe je een functie aanroept (event listener).
- Hoe je invoer van een gebruiker ophaalt en verwerkt.
- Hoe je met if-statements controleert of de invoer geldig is.
- Hoe je berekeningen opslaat in een array en die met een for-loop verwerkt.
- Hoe je de resultaten visueel presenteert in een webpagina met behulp van jQuery.
Dit project geeft je niet alleen inzicht in de basis van programmeren, maar laat je ook zien hoe je een stukje software bouwt dat meteen iets nuttigs kan doen. Aan het einde van deze opdracht heb je een volledig werkende rekenapplicatie gemaakt!
Wat ga je doen?
- Script schrijven: Schrijf een JavaScript-programma dat:
- Twee door de gebruiker ingevoerde getallen verwerkt.
- Valideert of de invoer geldig is.
- Vier berekeningen uitvoert: optellen, aftrekken, vermenigvuldigen en delen.
- De resultaten dynamisch weergeeft op de pagina.
- Testen: Controleer of je script werkt zoals bedoeld en zorg ervoor dat de foutmeldingen verschijnen bij verkeerde invoer.
Zorg dat je alles goed begrijpt zodat je in de toets zelf kunt bedenken hoe je het geleerde kunt toepassen.
De html pagina
Maak een nieuw project aan.
In de HTML pagina maak je een div met daarin
- twee input velden
- een button
- en een div waarin resultaten weergegeven kunnen worden
<div id = "wrapper">
<input type="number" id="getal1" placeholder="getal 1">
<input type="number" id="getal2" placeholder="getal 2">
<button id="bereken">Bereken</button>
<div id="resultaat" class="resultaat"></div>
</div>
Het script
Er wordt een array gedeclareerd met daarin de berekeningen die in het script uitgevoerd moeten worden. We hebben deze array later nodig om zinnen mee te maken.
$(document).ready(function() {
const berekeningen = ["som","verschil","product","quotiënt"];
});
Event listener
Een event listener is een stukje code dat luistert naar
een bepaalde gebeurtenis (zoals een klik, invoer, of muisbeweging)
en een actie uitvoert zodra die gebeurtenis plaatsvindt.
De ingevoerde waardes worden uit de invoervelden opgehaald en in variabelen opgeslagen.
Omdat javaScript de inhoud van een invoerveld als string ziet kunnen we de waardes niet altijd gebruiken om er berekeningen van te maken.
Daarom maken we er een Number() van.
Met een if statement worden de ingevoerde cijfers gevalideerd.
De ingevoerde waarden moeten positieve getallen zijn.
Bij foutieve invoer wordt in #resultaat een error (foutmelding) gegeven.
EEN FUNCTIE AANROEPEN
Als de ingevoerde waardes correct zijn moet er een functie worden uitgevoerd.
Tussen de haakjes staan de parameters (in dit geval zijn dat de variabelen) die de functie nodig heeft om te kunnen werken. Op die manier worden de ingevoerde waarden met de aanroep van de functie meegestuurd.
$(document).ready(function() {
const berekeningen = ["som","verschil","product","quotiënt"];
$('#bereken').click(function() {
let cijfer1 = Number($('#getal1').val());
let cijfer2 = Number($('#getal2').val());
if(cijfer1 > 0 && cijfer2 > 0){
updateCijfersDisplay(cijfer1,cijfer2)
}else{
$('#resultaat').html("Voer positieve getallen in!")
}
});
});
Function declaration
Een Function Declaration is een manier om een functie in JavaScript te definiëren, omdat je deze overal in de code moeet kunnen aanroepen wordt deze bovenaan in het script geplaatst.
Tussen de haakjes ontvangt de functie de parameters die met de aanroep werden meegestuurd.
De variabelen cijfer1 en cijfer2 kunnen nu dus in de functie gebruikt worden.
$(document).ready(function() {
const berekeningen = ["som","verschil","product","quotiënt"];
function updateCijfersDisplay(cijfer1,cijfer2) {
//hier komt de code
}
$('#bereken').click(function() {
let cijfer1 = Number($('#getal1').val());
let cijfer2 = Number($('#getal2').val());
if(cijfer1 > 0 && cijfer2 > 0){
updateCijfersDisplay(cijfer1,cijfer2)
}else{
$('#resultaat').html("Voer positieve getallen in!")
}
});
});
Functie inhoud
We gaan nu vastleggen wat er moet gebeuren in deze functie.
Een array resultaten wordt aangemaakt.
Er worden 4 variabelen gedeclareerd waarin de resultaten van berekeningen worden vastgelegd.
De uitkomsten worden opgeslagen in de array.
Controleer on de console of de uitkomsten correct zijn en of ze op de juiste manier in de array opgeslagen zijn.
function updateCijfersDisplay(cijfer1,cijfer2) {
let resultaten = [ ];
let som = cijfer1 + cijfer2;
resultaten.push(som);
let verschil = cijfer1 - cijfer2;
resultaten.push(verschil);
let product = cijfer1 * cijfer2;
resultaten.push(product);
let quotiënt = cijfer1 / cijfer2;
resultaten.push(quotiënt);
}
function updateCijfersDisplay(cijfer1,cijfer2) {
let resultaten = [ ];
let som = cijfer1 + cijfer2;
resultaten.push(som);
let verschil = cijfer1 - cijfer2;
resultaten.push(verschil);
let product = cijfer1 * cijfer2;
resultaten.push(product);
let quotiënt = cijfer1 / cijfer2;
resultaten.push(quotiënt);
$('#resultaat').empty();
for(let i = 0 ; i < resultaten.length ; i++){
let txt = "<p>Het "+berekeningen[i]+" van " + cijfer1 + " en " + cijfer2 + " is "+ resultaten[i].toFixed(1) + "</p>";
$('#resultaat').append(txt);
}
}
Afmaken en Opmaken!
Div #resultaten wordt leeggemaakt.
Met een for-loop worden de resultaten verwerkt in strings die vervolgens in #resultaten weergegeven worden.
Om de uitkomsten af te ronden februik je .toFixed(1).
Tussen de haakjes staat het aantal decimalen dat de uitkomt moet krijgen.
Zorg en met CSS voor dat het eindresultaat er netjes, overzichtelijk en aantrekkelijk uit ziet.