JavaScript Rekenmachine Code Generator
Bouw een aangepaste JavaScript calculator met deze interactieve tool
HTML Code:
CSS Code:
JavaScript Code:
Totaal regels code:
De Ultieme Gids voor JavaScript Rekenmachine Code
Het bouwen van een functionele rekenmachine met JavaScript is een uitstekende manier om uw vaardigheden in front-end ontwikkeling te verbeteren. Deze uitgebreide gids zal u door het hele proces leiden, van basisconcepten tot geavanceerde functionaliteiten.
Waarom een JavaScript Rekenmachine Bouwen?
Het creëren van een rekenmachine met JavaScript biedt verschillende voordelen:
- Praktische toepassing van HTML, CSS en JavaScript
- Begrip van DOM manipulatie en event handling
- Oefening in logische operaties en wiskundige berekeningen
- Mogelijkheid om geavanceerde functionaliteiten zoals geschiedenis, thema’s en responsive design toe te voegen
- Portfolio stuk dat uw probleemoplossende vaardigheden demonstreert
Basisstructuur van een JavaScript Rekenmachine
Elke JavaScript rekenmachine bestaat uit drie hoofdcomponenten:
- HTML Structuur: De basisopmaak en knoppen
- CSS Styling: Het uiterlijk en de gebruikerservaring
- JavaScript Functionaliteit: De logica achter de berekeningen
1. HTML Structuur
De HTML vormt de basis van uw rekenmachine. Hier is een eenvoudig voorbeeld:
<div class=”calculator”>
<div class=”display” id=”display”>0</div>
<div class=”buttons”>
<button class=”btn operator”>C</button>
<button class=”btn operator”>±</button>
<button class=”btn operator”>%</button>
<button class=”btn operator”>÷</button>
<button class=”btn number”>7</button>
<button class=”btn number”>8</button>
<button class=”btn number”>9</button>
<button class=”btn operator”>×</button>
<button class=”btn number”>4</button>
<button class=”btn number”>5</button>
<button class=”btn number”>6</button>
<button class=”btn operator”>-</button>
<button class=”btn number”>1</button>
<button class=”btn number”>2</button>
<button class=”btn number”>3</button>
<button class=”btn operator”>+</button>
<button class=”btn zero”>0</button>
<button class=”btn number”>.</button>
<button class=”btn equals”>=</button>
</div>
</div>
2. CSS Styling
De CSS bepaalt hoe uw rekenmachine eruitziet. Hier is een basisstijl:
.calculator {
width: 300px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
background-color: #f9f9f9;
}
.display {
background-color: #222;
color: #fff;
padding: 20px;
text-align: right;
font-size: 2em;
border-radius: 5px;
margin-bottom: 20px;
height: 30px;
overflow: hidden;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.btn {
padding: 20px;
font-size: 1.2em;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}
.number {
background-color: #e0e0e0;
}
.number:hover {
background-color: #d0d0d0;
}
.operator {
background-color: #ff9500;
color: white;
}
.operator:hover {
background-color: #e68a00;
}
.equals {
background-color: #ff9500;
color: white;
grid-column: 4;
grid-row: 2 / span 4;
height: 100%;
}
.equals:hover {
background-color: #e68a00;
}
.zero {
grid-column: 1 / span 2;
}
3. JavaScript Functionaliteit
De JavaScript code voegt de functionaliteit toe:
document.addEventListener(‘DOMContentLoaded’, function() {
const display = document.getElementById(‘display’);
const buttons = document.querySelectorAll(‘.btn’);
let currentInput = ‘0’;
let previousInput = ”;
let operation = null;
let resetScreen = false;
buttons.forEach(button => {
button.addEventListener(‘click’, () => {
const value = button.textContent;
if (button.classList.contains(‘number’)) {
inputNumber(value);
} else if (button.classList.contains(‘operator’)) {
handleOperator(value);
} else if (button.classList.contains(‘equals’)) {
calculate();
}
});
});
function inputNumber(number) {
if (currentInput === ‘0’ || resetScreen) {
currentInput = ”;
resetScreen = false;
}
currentInput += number;
updateDisplay();
}
function handleOperator(op) {
if (op === ‘C’) {
currentInput = ‘0’;
previousInput = ”;
operation = null;
updateDisplay();
return;
}
if (op === ‘±’) {
currentInput = (parseFloat(currentInput) * -1).toString();
updateDisplay();
return;
}
if (op === ‘%’) {
currentInput = (parseFloat(currentInput) / 100).toString();
updateDisplay();
return;
}
if (operation !== null) calculate();
previousInput = currentInput;
operation = op;
resetScreen = true;
}
function calculate() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case ‘+’:
result = prev + current;
break;
case ‘-‘:
result = prev – current;
break;
case ‘×’:
result = prev * current;
break;
case ‘÷’:
result = prev / current;
break;
default:
return;
}
currentInput = result.toString();
operation = null;
previousInput = ”;
resetScreen = true;
updateDisplay();
}
function updateDisplay() {
display.textContent = currentInput;
}
});
Geavanceerde Functionaliteiten Toevoegen
Zodra u de basis rekenmachine werkt, kunt u geavanceerde functionaliteiten toevoegen:
1. Berekeningsgeschiedenis
Voeg een geschiedenispaneel toe dat vorige berekeningen bijhoudt:
<div class=”history” id=”history”>
<h3>Geschiedenis</h3>
<ul id=”history-list”></ul>
</div>
// Voeg dit toe aan uw JavaScript
const historyList = document.getElementById(‘history-list’);
function addToHistory(expression, result) {
const item = document.createElement(‘li’);
item.textContent = `${expression} = ${result}`;
historyList.prepend(item);
// Beperk tot 10 items
if (historyList.children.length > 10) {
historyList.removeChild(historyList.lastChild);
}
}
// Wijzig de calculate functie om geschiedenis toe te voegen
function calculate() {
// … bestaande code …
addToHistory(`${previousInput} ${operation} ${currentInput}`, currentInput);
updateDisplay();
}
2. Wetenschappelijke Functionaliteiten
Voeg wetenschappelijke operaties toe zoals sin, cos, tan, log, etc.:
<button class=”btn scientific”>sin</button>
<button class=”btn scientific”>cos</button>
<button class=”btn scientific”>tan</button>
<button class=”btn scientific”>log</button>
<button class=”btn scientific”>√</button>
<button class=”btn scientific”>x²</button>
<button class=”btn scientific”>x³</button>
<button class=”btn scientific”>π</button>
<button class=”btn scientific”>e</button>
// Voeg dit toe aan uw event listener
} else if (button.classList.contains(‘scientific’)) {
handleScientificOperation(value);
}
// Voeg deze functie toe
function handleScientificOperation(op) {
let result;
const current = parseFloat(currentInput);
switch(op) {
case ‘sin’:
result = Math.sin(current);
break;
case ‘cos’:
result = Math.cos(current);
break;
case ‘tan’:
result = Math.tan(current);
break;
case ‘log’:
result = Math.log10(current);
break;
case ‘√’:
result = Math.sqrt(current);
break;
case ‘x²’:
result = Math.pow(current, 2);
break;
case ‘x³’:
result = Math.pow(current, 3);
break;
case ‘π’:
result = Math.PI;
break;
case ‘e’:
result = Math.E;
break;
default:
return;
}
currentInput = result.toString();
updateDisplay();
}
3. Thema’s en Stijlopties
Voeg de mogelijkheid toe om tussen verschillende thema’s te schakelen:
<div class=”theme-selector”>
<button class=”theme-btn” data-theme=”light”>Licht</button>
<button class=”theme-btn” data-theme=”dark”>Donker</button>
<button class=”theme-btn” data-theme=”colorful”>Kleurrijk</button>
</div>
// Voeg dit toe aan uw JavaScript
document.querySelectorAll(‘.theme-btn’).forEach(btn => {
btn.addEventListener(‘click’, () => {
const theme = btn.getAttribute(‘data-theme’);
document.body.className = theme;
// U kunt ook lokale opslag gebruiken om de voorkeur op te slaan
localStorage.setItem(‘calculatorTheme’, theme);
});
});
// Laad opgeslagen thema bij het laden van de pagina
document.addEventListener(‘DOMContentLoaded’, () => {
const savedTheme = localStorage.getItem(‘calculatorTheme’) || ‘light’;
document.body.className = savedTheme;
});
4. Responsive Design
Zorg ervoor dat uw rekenmachine goed werkt op alle apparaten:
@media (max-width: 600px) {
.calculator {
width: 100%;
margin: 10px;
padding: 10px;
}
.display {
font-size: 1.5em;
padding: 15px;
}
.btn {
padding: 15px;
font-size: 1em;
}
}
Prestatie Optimalisatie
Voor complexe rekenmachines is prestatieoptimalisatie belangrijk:
- Debounce input voor snelle toetsaanslagen
- Memoization voor herhaalde berekeningen
- Web Workers voor zware wiskundige operaties
- Efficient DOM updates met document fragments
- Lazy loading voor wetenschappelijke functies
Voorbeeld: Debounce Input
function debounce(func, wait) {
let timeout;
return function() {
const context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
// Gebruik bij het toevoegen van event listeners
buttons.forEach(button => {
button.addEventListener(‘click’, debounce(() => {
// uw handler code
}, 100));
});
Veelgemaakte Fouten en Oplossingen
Bij het bouwen van JavaScript rekenmachines komen enkele veelvoorkomende problemen voor:
| Probleem | Oorzaak | Oplossing |
|---|---|---|
| Drijvende komma nauwkeurigheid | JavaScript gebruikt drijvende komma aritmetiek die soms onnauwkeurig is | Gebruik een bibliotheek zoals decimal.js of rond af op een redelijk aantal decimalen |
| Knoppen reageren niet | Event listeners zijn niet correct toegevoegd of DOM elementen zijn niet geladen | Zorg ervoor dat uw code wordt uitgevoerd na DOMContentLoaded en controleer uw selectors |
| Display toont “NaN” | Ongeldige wiskundige operaties of conversies | Voeg validatie toe voordat u berekeningen uitvoert en behandel fouten |
| Stijl wordt niet toegepast | CSS specificiteit problemen of verkeerde class names | Gebruik browser developer tools om stijlen te inspecteren en specifieke selectors te gebruiken |
| Geschiedenis werkt niet | Variabelen worden niet correct bijgewerkt of DOM manipulaties falen | Debug met console.log om de stroom van gegevens te volgen en zorg voor correcte DOM updates |
Vergelijking van JavaScript Rekenmachine Bibliotheken
Als u niet vanaf nul wilt beginnen, zijn er verschillende bibliotheken beschikbaar:
| Bibliotheek | Grootte | Functies | Thema’s | Responsive |
|---|---|---|---|---|
| Calculator.js | 12KB | Basis en wetenschappelijke operaties | Ja (3) | Ja |
| Math.js | 120KB | Geavanceerde wiskunde, matrix operaties | Nee | Ja |
| Simple Calculator | 5KB | Basis operaties | Ja (2) | Ja |
| Calc | 8KB | Basis en financiële operaties | Ja (4) | Ja |
| Numjs | 150KB | Wetenschappelijke en statistische functies | Nee | Gedeeltelijk |
Toepassingen van JavaScript Rekenmachines
JavaScript rekenmachines hebben verschillende praktische toepassingen:
- E-commerce: Prijscalculators, kortingsberekeningen, verzendkosten
- Financiën: Lening calculators, investeringsgroei, rente berekeningen
- Gezondheid: BMI calculators, calorie tellers, fitness trackers
- Onderwijs: Wiskunde oefeningen, quizzen, interactieve lessen
- Techniek: Eenheden conversie, materiaal sterkte berekeningen
- Persoonlijk gebruik: Budget planners, tijd trackers, productiviteit tools
Case Study: E-commerce Prijscalculator
Een veelvoorkomend gebruik van JavaScript rekenmachines in e-commerce is het berekenen van totale kosten inclusief belastingen en verzending:
<div class=”price-calculator”>
<div class=”input-group”>
<label>Product prijs:</label>
<input type=”number” id=”product-price” value=”0″>
</div>
<div class=”input-group”>
<label>Aantal:</label>
<input type=”number” id=”quantity” value=”1″ min=”1″>
</div>
<div class=”input-group”>
<label>Belasting (%):</label>
<input type=”number” id=”tax-rate” value=”21″>
</div>
<div class=”input-group”>
<label>Verzendkosten:</label>
<input type=”number” id=”shipping” value=”0″>
</div>
<button id=”calculate-total”>Bereken Totaal</button>
<div id=”total-result”>Totaal: €0.00</div>
</div>
document.getElementById(‘calculate-total’).addEventListener(‘click’, () => {
const price = parseFloat(document.getElementById(‘product-price’).value);
const quantity = parseInt(document.getElementById(‘quantity’).value);
const taxRate = parseFloat(document.getElementById(‘tax-rate’).value);
const shipping = parseFloat(document.getElementById(‘shipping’).value);
const subtotal = price * quantity;
const tax = subtotal * (taxRate / 100);
const total = subtotal + tax + shipping;
document.getElementById(‘total-result’).textContent =
`Totaal: €${total.toFixed(2)}` +
` (Subtotaal: €${subtotal.toFixed(2)}, ` +
`Belasting: €${tax.toFixed(2)}, ` +
`Verzending: €${shipping.toFixed(2)})`;
});
Toekomstige Trends in Web Calculators
De ontwikkeling van web calculators evolueert voortdurend. Enkele opkomende trends zijn:
- AI-gestuurde calculators die contextuele suggesties doen
- Spraakgestuurde interfaces voor handsfree gebruik
- Augmented Reality integratie voor 3D visualisaties
- Blockchain-based calculators voor financiële toepassingen
- Progressive Web Apps voor offline functionaliteit
- Machine learning voor patroonherkenning in berekeningen
Voorbeeld: Spraakgestuurde Calculator
Met de Web Speech API kunt u spraakherkenning toevoegen:
<button id=”start-listening”>Start Luisteren</button>
<div id=”speech-result”></div>
const startButton = document.getElementById(‘start-listening’);
const resultDiv = document.getElementById(‘speech-result’);
startButton.addEventListener(‘click’, () => {
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = ‘nl-NL’;
recognition.onresult = (event) => {
const speechResult = event.results[0][0].transcript;
resultDiv.textContent = `U zei: ${speechResult}`;
// Verwerk de spraakinput als een wiskundige expressie
try {
const result = evaluateMathExpression(speechResult);
resultDiv.textContent += `\nResultaat: ${result}`;
} catch (e) {
resultDiv.textContent += `\nKon expressie niet berekenen`;
}
};
recognition.start();
});
function evaluateMathExpression(expr) {
// Vervang gesproken woorden door symbolen
const cleaned = expr
.replace(/plus/g, ‘+’)
.replace(/min/g, ‘-‘)
.replace(/keer|maal/g, ‘*’)
.replace(/gedeeld door|del/g, ‘/’)
.replace(/kwadraat/g, ‘**2’)
.replace(/wortel/g, ‘Math.sqrt’)
.replace(/pi/g, ‘Math.PI’)
.replace(/,/g, ‘.’);
// Veilige evaluatie
return Function(`’use strict’; return (${cleaned})`)();
}
Bronnen voor Verdere Studie
Voor dieper inzicht in JavaScript rekenmachines en gerelateerde onderwerpen:
- MDN JavaScript Documentation – Officiële JavaScript documentatie
- W3Schools JavaScript Tutorial – Praktische JavaScript tutorials
- Eloquent JavaScript – Gratis online boek over JavaScript
- The Modern JavaScript Tutorial – Uitgebreide JavaScript gids
- Math is Fun – Wiskunde concepten uitgelegd
Academische Bronnen
Voor diepgaande wiskundige en computationele concepten:
- MIT OpenCourseWare – Mathematics – Gratis wiskunde cursussen van MIT
- Khan Academy – Math – Interactieve wiskunde lessen
- National Institute of Standards and Technology – Officiële metrologie standaarden
Conclusie
Het bouwen van een JavaScript rekenmachine is een uitstekend project om uw webontwikkelingsvaardigheden te verbeteren. Begin met een eenvoudige implementatie en voeg geleidelijk geavanceerdere functionaliteiten toe naarmate u meer leert.
Onthoud dat de sleutel tot een succesvolle rekenmachine ligt in:
- Een duidelijke gebruikersinterface die intuïtief werkt
- Betrouwbare berekeningen met goede foutafhandeling
- Goede prestaties, vooral voor complexe operaties
- Responsive design voor alle apparaten
- Toegankelijkheid voor alle gebruikers
Met de kennis uit deze gids kunt u nu uw eigen aangepaste JavaScript rekenmachine bouwen die voldoet aan uw specifieke behoeften, of het nu voor persoonlijk gebruik, onderwijs of zakelijke toepassingen is.