Hauptmenü

Untermenü

JavaScript - Tipps & Tricks

1. Über dieses Kapitel

Geplant ist an dieser Stelle, euch ein paar Dinge zu zeigen, die einen bei JavaScript manchmal zur Verzweiflung treiben. Und was für Lösungsmöglichkeiten es gibt. OK, bis jetzt habe ich erst ein Beispiel, aber ich hoffe, dass ich im Laufe der Zeit das peu à peu ergänzen werde.

2. Rechnen mit JavaScript

... kann manchmal ganz schön nerven. Beispiel gefällig? Wir haben ein pisseliges Formularfeld mit einem Float-Wert als Inhalt. Jetzt soll jedes Mal beim Klick auf den Button davon 0.3 abgezogen werden. Probiert es mal mehrmals aus.

Schön, nicht? Nö, das ist ja so nicht im Sinne des Erfinders. Und woher kommt das? Nun, JavaScript arbeitet wie alle Programmiersprachen intern mit Binärwerten und wandelt die dann um. Und da scheint sich diese Sprache ganz gerne zu verschlucken. Allerdings wohl nur bei einstelligen Nachkommazahlen soweit ich das bisher getestet habe. Aber wie löst man das Problem?

3. parseFloat?

Ist ein nahe liegender Gedanke, bringt aber leider nichts. Denn parseFloat versucht nur, so weit wie möglich aus einer Zeichenkette eine Fließkommazahl zu machen. Hilft also nichts.

4. Aufdröseln?

Wäre eine Möglichkeit. Man zerlegt den Wert in seine Nachkommastellen, prüft, ob glatt durch 10 teilbar ist und wenn nicht, dann ... Ihr merkt schon, auch keine gute Idee.

5. Die Lösung

... liegt in zwei schönen Methoden des Number-Objekts. Ich hätte ich wirklich mal mit denen beschäftigen sollen, dann hätte ich mir viel Zeit gespart und meine Nerven geschont.

toPrecision

Damit legt man eine Genauigkeit bei der Anzeige(!) einer Fließkommazahl fest. Bei zwei Stellen hinter dem Komma nimmt man ein toPrecision mit dem Parameter 3.

toFixed

Hier wird kaufmännisch auf- oder abgerundet. Beim Parameter wird im Gegensatz zu toPrecision nicht die Genauigkeit sondern die Anzahl der Nachkommastellen angegeben.

Beispiele


<p>
  <input type="text" value="10.00" id="wert"/>
  <button id="klick">Ziege 0.3 ab</button>
</p>
<script type="text/javascript">
  document.getElementById('klick').onclick = function() {
    var input   document.getElementById('wert');
    input.value = (input.value 0.3).toPrecision(3);
  }      
</script>



<p>
  <input type="text" value="10.00" id="wert"/>
  <button id="klick">Ziege 0.3 ab</button>
</p>
<script type="text/javascript">
  document.getElementById('klick').onclick = function() {
    var input   document.getElementById('wert');
    input.value = (input.value 0.3).toFixed(2);
  }      
</script>


Und der Unterschied

Tja, den habe ich auch noch nicht ganz ausbaldowert. Auf den ersten Blick scheinen aber die Ergebnisse beide Lösungen für unser Rundungsproblem identisch zu sein. Und darauf kommt es an.