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:

Berechne Summe!

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 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 dem Namen "Berechne Summe!" 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. Sie dienen dazu, bestimmte Elemente auf der Webseite auszuwählen und bspw. mit JavaScript zu bearbeiten.
• 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, wie folgt:



• Einmalige Identifizierung: IDs sollten in einem HTML-Dokument eindeutig sein. Das bedeutet, dass kein anderes Element dieselbe ID haben darf.

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.
• Erstelle die Ausgabe mit der Variablen vAusgabe.
• 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 divElement, 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 (idSummand1 und idSummand2) mit parseFloat() in Fließkommazahlen umgewandelt.
• Die Addition der beiden Zahlen erfolgt in der Zeile 19:
• var vSumme = vSummand1 + vSummand2;
• Das Ergebnis wird dann in das div-Element mit der ID "idausgabe" eingefügt, um es anzuzeigen.

Schritt 5: Teste das Programm

• Speichere die HTML-Datei und öffnen sie in einem Webbrowser.
• Gebe zwei Zahlen in die Eingabefelder ein und „Klicke“ auf den "Berechne Summe!"- Button, um das Ergebnis zu sehen.

Übungsaufgaben zu LE00

Hinweis: Alle Ergebnisse und Zwischenergebnisse müssen in Moodle abgegeben werden.