JavaScript: Brüche

Programmieren mit JavaScript

Brüche

RSA-Verfahren Inhalt Canvas : Grafiken erzeugen

Voraussetzungen

Die Funktion "ggT" aus Kapitel 10
Tabellen

Darstellung
von Brüchen

Um die von der Mathematik gewohnte zweizeilige Schreibweise von Brüchen zu erhalten, muss man Tabellen verwenden.

1
--
3

2
--
5

11
---
15

wird erzeugt durch die HTML - Zeilen

<table border cellpadding="5">
<tr>
 <td>1 <br> -- <br> 3 </td>
 <td>+ </td>
 <td>2 <br> -- <br> 5 </td>
 <td>= </td>
 <td>11 <br> --- <br> 15 </td>
</tr>
</table>

Ohne die "border" - Angabe im "Table" - Tag entsteht eine sogenannte "blinde Tabelle". "Blinde Tabellen" werden sehr oft in HTML - Dokumenten zur Textgestaltung eingesetzt.

1
--
3

2
--
5

11
---
15

Im folgenden Beispiel wird auf diese Weise ein kleiner "Bruch - Taschenrechner" realisiert.

Das Ergebnis soll immer ein vollständig gekürzter Bruch sein. Der Kürzungsfaktor wird mit Hilfe der Funktion "ggT" aus dem Kapitel 10 "Funktionen mit Wertübergabe" ermittelt.

Beispiel

Grundrechenarten mit Brüchen

Tragen Sie zwei Brüche und eines der Rechenzeichen "+", "-", "*", "/" ein und klicken dann auf "=".

Sie können die Funktionsweise hier testen, indem Sie die Zahlen ändern und dann auf "=" klicken.

oder

"Bruch.html"als neue Seite öffnen

Quelltext

<html><head>
<title>Bruchrechnung</title>
<script LANGUAGE="JavaScript">

Hier wird das Script eingefügt

</script>
</head>
<body>
Grundrechenarten mit Brüchen<p>
Tragen Sie zwei Brüche und eines der Rechenzeichen
"+", "-", "*", "/" ein und klicken dann auf "=".<p>
<form name="brueche">
<table >
<tr>
 <td> <input type="text"  size="6"  name="z1"> <br>
      ----------<br>
      <input type="text"  size="6"  name="n1"> </td>

z1 : Zähler1, n1 : Nenner1, op steht für das Rechenzeichen

 <td> <input type="text"  size="1"  name="op"></td>
 <td> <input type="text"  size="6"  name="z2"> <br>
      ----------<br>
      <input type="text"  size="6"  name="n2"></td>
 <td> <input type="button" value="=" onclick="berechne()"></td>

Durch einen Klick auf die Schaltfläche mit dem "="

wird die Funktion "berechne" aufgerufen.

 <td> <input type="text"  size="6"  name="zErg"><br>
     ----------<br>
     <input type="text"  size="6"  name="nErg"></td>
</tr>
</table></form>
</body></html>

Javascript-
Funktion

  function berechne(){
    var zaehler1, zaehler2, zaehlerE, nenner1,  nenner2, nennerE;
    with (document.brueche){

"with" bildet nur eine Abkürzung, um nicht jedes Mal

"document.brueche.z1.value" schreiben zu müssen usw.

      zaehler1 = parseInt(z1.value);
      zaehler2 = parseInt(z2.value);
      nenner1 = parseInt(n1.value);
      nenner2 = parseInt(n2.value);

Durch die Systemfunktion "parseInt" sichert man,

dass Javascript die Eingaben nicht als Strings ansieht,

sondern als Zahlen ("Int" steht für Integer: ganze Zahl)

    }
    switch(document.brueche.op.value){

"switch" ist eine Abkürzung für die mehrfache Verzweigung.

      case "+": zaehlerE = zaehler1 * nenner2 + zaehler2 * nenner1;
                nennerE = nenner1 *nenner2;
                break;
      case "-": zaehlerE = zaehler1 * nenner2 - zaehler2 * nenner1;
                nennerE = nenner1 *nenner2;
                break;
      case "*": zaehlerE = zaehler1 * zaehler2;
                nennerE = nenner1 *nenner2;
                break;
      case "/": zaehlerE = zaehler1 * nenner2;
                nennerE = nenner1 *zaehler2;
                break;
      default: alert("falscher Operator!");
               break;
    }
    with (document.brueche){
      ggTZN = ggT (Math.abs(zaehlerE), Math.abs(nennerE));

Weil die Funktion "ggT" nicht mit negativen Zahlen klar kommt,

wird zunächst der Absolutbetrag ("Math.abs") von Zähler und Nenner gebildet.

      zErg.value = zaehlerE/ggTZN;
      nErg.value = nennerE/ggTZN;

Zähler und Nenner werden durch den größten gemeinsamen

Teiler (ggT) geteilt und damit der Bruch gekürzt.

    }
  } // Ende der function berechne

  function ggT(a,b) {
    var c, d ;
    c = a; d = b;
    while ( c != d ) {
            if ( c < d )
                d = d - c
            else c = c - d
          }
     return(c);
  }// Ende der Funktion

with
Syntax

with ( Objektname ) { ... }

In dem durch geschweifte Klammern umschlossenen Block wird vor jedes passende Objekt "Objektname." gesetzt.
Bsp.: Die folgenden beiden Zeilen haben die gleiche Bedeutung:

with (document.brueche){ zaehler1 = parseInt(z1.value); }
zaehler1 = parseInt(document.brueche.z1.value);

Es geht dabei nur um eine Abkürzung der Schreibweise ohne weitere Hintergedanken.

switch
Syntax

switch ( Variable ) {
  case Wert1 :   Anweisung(en);
                 break;
  case Wert2 :   Anweisung(en);
                 break;
  ...
  default    :   Anweisung(en);
                 break;
  }

Die Variable wird zur Laufzeit des Programms ausgewertet. Ausgeführt werden die Anweisungen, die hinter dem entsprechenden "case" stehen. Ist der Variablenwert bei "case" nicht vorhanden, geht es weiter mit "default".

Aufgabe

Erweitere den Bruch - Taschenrechner so, dass man gemischte Zahlen eingeben kann:

1
--
2

1
--
3

5
--
6

RSA-Verfahren Seitenanfang Canvas : Grafiken erzeugen