UNLISTED ROUTE // NOT INDEXED

Segment --

training modules module

1.14 JS Kontrollstrukturen

← Back to index Open fullscreen → Source

Entwicklung eines Web-Taschenrechners

In diesem umfangreichen Kapitel werden wir den Taschenrechner von Grund auf entwickeln.

Schritt 1: Verstehen der Grundlagen

Bevor wir beginnen, ist es wichtig, einige Grundlagen zu wiederholen und zu verstehen, wie diese in unserem Projekt angewendet werden.

Kontrollstrukturen

Kontrollstrukturen steuern den Ablauf eines Programms. In JavaScript gibt es verschiedene Typen von Kontrollstrukturen:

Bedingte Anweisungen (if, else, und else if)
Schleifen (for, while, und do-while)
Schalteranweisungen (switch)

Diese Strukturen ermöglichen es uns, auf Benutzereingaben zu reagieren und entsprechende Logik auszuführen.

Funktionen

Funktionen sind wiederverwendbare Codeblöcke, die spezifische Aufgaben durchführen. Sie helfen dabei, unseren Code organisiert, lesbar und wartbar zu halten. In unserem Projekt werden wir Funktionen verwenden, um Berechnungen durchzuführen, Eingaben zu verarbeiten und das Ergebnis zu aktualisieren.

Schritt 2: Aufbau der HTML-Struktur

Beginnen wir mit der Erstellung des HTML-Gerüsts für unseren Taschenrechner.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Taschenrechner</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="calculator">
      <input type="text" id="display" disabled />
      <div id="keys">
        <button class="digit">1</button>
        <button class="digit">2</button>
        <!-- Weitere Zifferntasten -->
        <button class="operation">+</button>
        <!-- Weitere Operationstasten -->
        <button class="equal">=</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Schritt 3: Styling mit CSS

Das CSS sorgt dafür, dass unser Taschenrechner benutzerfreundlich und optisch ansprechend ist.

#calculator {
  width: 300px;
  margin: auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 10px #aaa;
}

#display {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  font-size: 1.5em;
  text-align: right;
  border: 1px solid #ccc;
}

#keys button {
  width: 23%;
  padding: 10px 0;
  margin: 1%;
  font-size: 1.2em;
  border: none;
  border-radius: 5px;
  background: #f0f0f0;
  box-shadow: 1px 1px 4px #ccc;
}

#keys button:hover {
  background-color: #e0e0e0;
}

Schritt 4: JavaScript-Logik implementieren

Jetzt beginnen wir mit der Implementierung der JavaScript-Logik für unseren Taschenrechner. Wir starten mit den Grundfunktionen und erweitern diese schrittweise.

Grundfunktionen

Wir definieren zunächst einige grundlegende Funktionen für die Interaktion mit dem DOM und die Handhabung der Taschenrechnerlogik.

let currentInput = ''
let currentOperation = null
let previousOperand = null

function insert(digit) {
  currentInput += digit
  document.getElementById('display').value = currentInput
}

function setOperation(op) {
  if (currentOperation !== null) {
    calculate()
  }
  previousOperand = parseFloat(currentInput)
  currentOperation = op
  currentInput = ''
}

function calculate() {
  let secondOperand = parseFloat(currentInput)
  let result
  switch (currentOperation) {
    case '+':
      result = previousOperand + secondOperand
      break
    case '-':
      result = previousOperand - secondOperand
      break
    // Add more operations
  }
  document.getElementById('display').value = result
  currentInput = result // Set current input to result for further calculations
  currentOperation = null // Reset operation
}

function clearAll() {
  currentInput = ''
  currentOperation = null
  previousOperand = null
  document.getElementById('display').value = ''
}

document.querySelectorAll('.digit').forEach((button) => {
  button.addEventListener('click', function () {
    insert(this.textContent)
  })
})

document.querySelectorAll('.operation').forEach((button) => {
  button.addEventListener('click', function () {
    setOperation(this.textContent)
  })
})

document.querySelector('.equal').addEventListener('click', calculate)
document.querySelector('.clear').addEventListener('click', clearAll)

Erweiterungen und Komplexere Funktionen

Nachdem die Grundfunktionalität implementiert ist, können wir unseren Taschenrechner um zusätzliche Funktionen wie Prozentrechnung, Wurzelberechnung oder trigonometrische Funktionen erweitern. Jede dieser Funktionen erfordert ein tieferes Verständnis von JavaScript und mathematischen Operationen.

Aufgabe: Komplexe Funktionen hinzufügen

Prozentrechnung: Implementiere eine Funktion, die es ermöglicht, Prozentsätze zu berechnen.
Wurzelberechnung: Füge eine Funktion hinzu, die die Quadratwurzel einer Zahl berechnet.
Trigonometrische Funktionen: Erweitere den Taschenrechner um die Berechnung von Sinus, Kosinus und Tangens.

function calculatePercentage() {
  let value = parseFloat(currentInput)
  document.getElementById('display').value = value / 100
  currentInput = value / 100
}

function calculateSquareRoot() {
  let value = parseFloat(currentInput)
  document.getElementById('display').value = Math.sqrt(value)
  currentInput = Math.sqrt(value)
}

function calculateSin() {
  let value = parseFloat(currentInput)
  document.getElementById('display').value = Math.sin((value * Math.PI) / 180) // Convert degrees to radians
  currentInput = Math.sin((value * Math.PI) / 180)
}

Questions // Debrief

Signal channels are available. If you want to follow up, scan the code or use the VCard endpoint.

QR code for https://wieerwill.dev/vcard.vcf

VCARD:
/vcard.vcf

MAIL:
robert.jeutter@wieerwill.dev

WEB:
https://wieerwill.dev

Connecting

uplink replies // thread

HINT

COMMENTS CHANNEL NOT ARMED FOR THIS ENTRY.

Return to the index or continue browsing adjacent segments.

STAMP MODULE:114-JAVA-SCRIPT-KONTROLLSTRUKTUREN-UND-FUNKTIONEN // ACCESS: PRIVATE

OPEN / HOME OPEN /CONTACT UPLINK

training modules // module