Erstellung eines einfachen Additionsrechners mit HTML und JavaScript
Dieser Abschnitt soll Schritt für Schritt zeigen, wie ein einfacher Additionsrechner mit HTML und JavaScript erstellt werden kann.
Additionsrechner
Summand 1:
Summand 2:
Hier kommt das Ergebnis der Addition von Summand1 und Summand2....
Schritt für Schritt - Anleitung
Schritt 1: HTML-Grundstruktur
- Erstelle eine HTML-Datei mit einer grundlegenden Struktur. Diese dient als Grundgerüst für den Additionsrechner.
- Visual Code Studio öffnen, auf neue Datei "anklicken", dann Datei speichern unter "anklicken" und als Dateinamen: addition.html eingeben.
- Anschließend gebe ein Semikolon (!) ein und "drücke" auf "Enter".
Schritt 2: HTML-IDs und Inputboxen
- Erstelle die beiden benötigten Inputboxen (für Eingabe Summand1 und Summand2), Button und einen div-Element für die Ausgabe.
- Benenne den div-Element in "idausgabe" und verbinde gleichzeitig den Button mit der Funktion fAddition().
Exkurs: HTML-IDs und JavaScript-Variablen
- Verwendungszweck: HTML-IDs sind Bezeichner, die in HTML-Dokumenten verwendet werden, um ein bestimmtes HTML-Element eindeutig zu identifizieren.
- Syntax: In HTML wird eine ID einem HTML-Element mithilfe des id-Attributs zugewiesen.
- Zugriff in JavaScript: Um auf ein HTML-Element mit einer bestimmten ID in JavaScript zuzugreifen, verwende die getElementById()-Methode.
Schritt 3: Hinzufügen des JavaScript-Teils zwischen den beiden <script> ... </script> -Tags
- Erstelle die Funktion fAddition().
- Erstelle die benötigten JavaScript-Variablen vSummand1 und vSummand2, verbinde diese mit den beiden Inputboxen-IDs.
- Die Funktion parseFloat() wandelt eine zu übergebende Zeichenkette in eine Zahl um und gibt diese als numerischen Wert zurück.
- Das Ergebnis soll dem erstellten div-Element "idausgabe" zugewiesen werden.
Schritt 4: Verstehen der Code-Erklärung
- In der HTML-Struktur haben wir zwei Eingabefelder (input) für die beiden Zahlen (Summand1, Summand2), einen Button zum Auslösen der Berechnung und ein leeres div-Element, in dem das Ergebnis angezeigt wird.
- Die JavaScript-Funktion fAddition() wird beim "Klicken" auf den Button aufgerufen.
- In der Funktion werden die Werte der beiden Eingabefelder mit parseFloat() in Fließkommazahlen umgewandelt.
- Die Addition der beiden Zahlen erfolgt in der Zeile:
var vSumme = vSummand1 + vSummand2;
Schritt 5: Teste das Programm
- Speichere die HTML-Datei und öffne sie in einem Webbrowser.
- Gebe zwei Zahlen in die Eingabefelder ein und „Klicke“ auf den "Berechne Summe!"-Button, um das Ergebnis zu sehen.