Informatik | JavaScript | Divisionsrechner

Aufgabe

Erstellen Sie in der Datei divisionsrechner.html folgenden Divisionsrechner:

Wenn auf den Button gedrückt wird, soll das Ergebnis wie folgt aussehen:
Der Quotient von 10 und 5 ist 2.

Vorgehen bei der Lösung

  1. Die Vorlage _vorlage.html ggf. kopieren und die Vorlage _vorlage.html in bspw. divisionsrechner.html umbenennen.

  2. Die Datei divisionsrechner.html in Notepad++ öffnen.

  3. In Notepad++ Menü mit Run -> Launch in Firefox die Datei divisionsrechner.html in Firefox öffnen.

  4. Syntaxhilfe.html im Browser aufrufen

  5. Die Datei divisionsrechner.html wird nun gemäß des Bildes in der Aufgabe geändert.
    Dabei sollte nach jeder geänderten oder erstellten Zeile die Datei gespeichert und in Firefox getestet werden.

    1. In den Tags title und h1 wird das Wort Aufgabe in das Wort Divisionsrechner geändert

    2. Ids von input-Tags und div-Tag, die mit id beginnen sollten, ausdenken (bspw. idDividend, idDivisor, idAusgabe)

    3. Standardwerte beim value Attribut übernehmen (bspw. value = “10“)

    4. Mit Hilfe des Spickzettels das Formular aufbauen

    5. Dem Button beim Ereignis onClick eine Funktion bspw. fRechne() zuordnen.

    6. Die HTML-Datei sieht danach so aus:


  6. Funktionsrumpf unter use strict aus der Syntaxhilfe einfügen:

  7. Danach wird f() durch fRechne() ersetzt.
    Der Name einer Funktion sollte immer mit einem f beginnen.
    Der Funktionsname muss der Ausprägung des onClick–Attributs des Buttons genau entsprechen.
    Die beiden Slashs (//) leiten ein Kommentar ein.
    Ein Kommentar wird bei der Ausführung des Programms ignoriert.

  8. Nun wird der Quellcode für eine Testausgabe geschrieben.
    Normalerweise endet Zeile mit einem Semikolon (;).
    Die Ausgabe, die im div-Tag mit der Id idAusgabeHtml erscheint, soll "Test" sein.
    Der Wert "Test" wird in der Ausgabevariablen vAusgabeHtml gespeichert.
    Namen von Variablen sollten immer mit einem v beginnen.

  9. Für jedes Textfeld im html-Bereich wird nun eine Eingabevariable deklariert.
    Danach wird den Eingabevariablen die Werte aus den Textfeldern zugewiesen.
    In der Variablen vAusgabeHtml wird die Ausgabe angepasst.

  10. Danach folgt die eigentliche Rechnung.
    Für die Berechnung des Ergebnisses sollte eine Verarbeitungsvariable deklariert werden.
    Das Ergebnis der Berechnung wird der Verarbeitungsvariable zugewiesen.
    Die Zuweisungen der Variablen vAusgabeHtml wird so angepasst, dass das Ergebnis auch ausgegeben wird.