Javascript ist mächtig aber manchmal ziemlich knifflig. Wir haben hier für Sie unsere besten Javascript-Tipps zusammengefasst.
Komma als Dezimalzeichen nutzen
Wenn Sie mit Javascript Werte ausgeben, die Nachkommastellen enthalten, erscheint der Punkt als Trenner zwischen den ganzen Zahlen und den Dezimalstellen. Andersherum meldet Javascript einen Fehler, wenn Benutzer das bei uns übliche Komma als Dezimaltrenner in einem Eingabefeld erwarten.
Leider gibt es in Jacascript im Gegensatz zu vielen anderen Sprachen keine Einstellung, um dieses Verhalten generell auf unsere Standards zu ändern. Stattdessen müssen Sie explizit Komma und Punkt tauschen, sobald es um die Ein- und Ausgabe von Fliesskommazahlen geht.
So verarbeiten Sie Nutzereingaben mit Komma
Angenommen, Sie haben ein Formularfeld für eine Umrechnungsfaktor, dessen ID im Formular „Faktor“ lautet. Dann holen Sie den Wert dieses Feldes mit Beachtung des Kommas so in Ihr Programm:
faktor = parseFloat(document.getElementById(‚faktor‘).value.replace(‚,‘, ‚.‘));
Die angehängte Methode .replace(…) ersetzt also einfach ein eventuell vorhandenes Komma gegen einen Punkt.
So geben Sie Float-Werte mit Komma aus
Bei der Ausgabe von Variablen mit möglichen Nachkommastellen drehen Sie einfach die Parameter von replace() um. Weil die Methode nur für Strings, aber nicht für Zahlen möglich ist, müssen Sie dabei zuerst noch eine Typwandlung durchführen:
kehrwert = 1 / zahl;
document.getElementById(‚kehrwert‘).value = kehrwert.toString().replace(‚.‘, ‚,‘);
Wenn Sie mehr als ein Feld haben, das so behandelt werden muss, schreiben Sie sich natürlich besser jeweils eine Funktion, um die Ersetzungen durchzuführen.
Runden mit Nachkommanstellen
Javascript hat mit Math.round() eine Funktion, um die übergebene Zahl zu runden. Dabei wird unter 0.5 ab- und ansonsten aufgerundet.
Wenn Sie Nachkommastellen brauchen, hilft Ihnen Math.round() nicht direkt weiter. Sie können aber einen einfachen Trick verwenden: Wollen Sie etwa mit zwei Nachkommastellen runden, multiplizieren Sie zuerst die Zahl mit 100, runden und teilen das Ergebnis wieder durch 100.
Am Beispiel von Pi: 3.1415892… * 100 = 314.15892…., ergibt gerundet 314 und nach dem Teilen durch 100 kommt das gewünschte Ergebnis 3.14 heraus.
In Javascript machen Sie sich dafür am besten eine Funktion, die als ersten Parameter die zu rundende Zahl erwartet und als zweiten Parameter die Anzahl der Nachkommastellen:
function myRound(zahl,n){
var faktor;
faktor = Math.pow(10,n);
return(Math.round(zahl * faktor) / faktor);
}
Dabei berechnet die Funktion den Faktor, mit dem zuerst multipliziert und nach dem Runden dividiert wird, einfach als Zehnerpotenz. Zwei Nachkommastellen bedeuten also 10^3 oder 1000.
Netter Nebeneffekt der Methode: Auch negative Werte für n sind erlaubt. Wollen Sie etwa eine Zahl nur auf die Tausender genau ausdrücken, verwenden Sie als zweiten Parameter -3. Das ergibt einen Faktor von 1/1000, was im Endeffekt einer Division entspricht. Anders gesagt: myRound(123456789,-3) ergibt 123457000 (Achtung, es wird ja aufgerundet. Darum ist das Ergebnis nicht etwa 12345600)
Achten Sie auf die richtigen Anführungszeichen
Wer sich beim Programmieren in Javascript oder anderen Sprachen an Tutorial aus dem Netz orientiert, wird auch immer wieder den dort angebotenen Quelltext kopieren und für seinen eigenen Bedarf modifizieren.
Fehler ist schwer zu finden
Doch dabei können sich unangenehme Fehler einschleichen, die nur nach langer Suche oder per Zufall gefunden werden.
Das Problem liegt an falschen Anführungszeichen, die bei manchen Webseiten auftreten. Statt des üblichen “ stehen dort dann andere Anführungszeichen – für den Leser sind das die gleichen Zeichen, für den Computer allerdings nicht.
Wenn also ein Javascript partout nicht funktionieren möchte, sehen Sie sich das Script genau an und prüfen Sie, ob die Anführungszeichen passen.
Zahlenwerte korrekt aus Eingabefeldern auslesen
Per Javascript können Sie recht einfach Inhalte einlesen, die einer Benutzer in ein Formularfeld eingegeben hat.
Gibt es beispielsweise bei Ihnen zwei Felder mit der Id Preis und Fracht, dann lesen Sie die in einem Script so ein
var preis, fracht;
preis = document.getElementById("Preis").value;
fracht = document.getElementById("Fracht").value;
Das funktioniert so recht gut. Allerdings nur, weil die automatische Typwandlung von Javascript in den meisten Fällen das erreicht, was Sie möchten.
Ein Problem ergibt sich beispielsweise, wenn Sie in dem folgenden Teil des Scripts diesen Ausdruck verwenden:
gesamtpreis = preis + fracht;
Gibt der Benutzer zum Beispiel einen Preis von 100 ein und eine Fracht von 15, hat gesamtpreis nicht etwa den Wert „115“ sondern „10015“.
Der Grund ist, dass alle Feldwerte für Javascript Zeichenketten sind. Es interpretiert den Operator + darum als Verkettung zweier Strings.
Würden Sie dagegen zum Beispiel schreiben
gesamtpreis = 1 * preis + fracht;
dann behandelt Javascript den Ausdruck links vom Pluszeichen als Zahl, weil Malzeichen ja nur für Zahlen definiert ist und ermittelt in Folge das korrekte Ergebnis 115.
Natürlich ist so eine Trickserei unschön und fehlerträchtig. Darum zwingen Sie am besten die Variable gleich beim Einlesen in das gewünschte Typkorsett:
var preis, fracht;preis = parseFloat(document.getElementById("Preis").value);fracht = parseFloat(document.getElementById("Fracht").value);
Eine Alternative zum Wandeln in einen ganzzahligen Wert, also ohne Nachkommastellen, ist die Funktion parseInt();
Javascript-Fehler: „submit is not a function“
Webformulare lassen sich mit Javascript prima aufpeppen. Um etwa eine Select-Box zu realisieren, die bei der Auswahl eines Wertes das Formular abschickt, ergänzt man einfach das <select>-Tag um die Information onChange=“document.forms[0].submit()“
Jetzt kann es aber passieren, dass dies fehlschlägt und die Javascript-Konsole des Browsers meldet document.forms[0].submit is not a function.
Abgesehen davon, dass vielleicht wirklich ein eigener Fehler vorliegt und die Objektreferenzierung vor dem submit-Aufruf einen Fehler enthält, ist ein typischer Verursacher eine problematische Benennung des Submit-Knopfes.
Gibt man ihm nämlich den Namen „submit“, verwendet also etwa folgendes Konstrukt, dann kommt Javascript durcheinander.
<input type="submit" name="submit" value="Speichern">
Denn dann führt ein onChange-Event auf der Select-Box fälschlicherweise zu einer Referenzierung des Knopfes anstatt der submit-Funktion selbst und zur genannten Fehlermeldung.
Als Abhilfe gibt man dem Knopf einen anderen Namen oder vezichtet auf den Namen ganz.
Datumsdifferenz per Javascript berechnen
Alle Aktionen mit Datumswerten sollten Sie mit der Javascript-Klasse Date lösen. Wollen Sie zum Beispiel die Differenz zweier Zeitpunkte ermitteln, erzeugen Sie je ein Date-Objekt für Beginn und Ende und berechnen danach die Differenz.
Die Subtraktion zweier Date-Objekte liefert als Ergebnis den Zeitunterschied in Millisekunden, den Sie nur noch entsprechend umrechnen müssen.
So erzeugen Sie ein Objekt für Datums-/Zeitwerte
Der Konstruktor von Date ist überladen. Das bedeutet, dass Sie beim Erzeugen eines Objekts verschiedene Varianten verwenden können. Am einfachsten ist die Version ohne Parameter. Sie erzeugt ein Datumsobjekt des aktuellen Zeitstempels.
dNow = new Date();
Um ein bestimmtes Datum zu setzen, können Sie eine Zeichenkette verwenden. Leider beherrscht Javascript dabei aber keine deutschen Datums-/Zeitformate, so dass lediglich etwas in dieser Art funktioniert:
dSomeDate = new Date(„October 13, 1975 11:13:00“);
Stattdessen müssen Sie bei der Erzeugung eines Zeitstempels dessen Bestandteile wie Jahr oder Monat als einzelne numerische Parameter verwenden. Hier zum Beispiel die letzte Sekunde vor dem Jahreswechsel 2010/2011:
dSilvester2010 = new Date(2010, 11, 31, 23, 59, 59);
Ist es Ihnen aufgefallen? Beim Monat steht eine 11, obwohl das Datum im Dezember liegt. Das ist eine Eigenheit des Date-Objekts: Es will immer den Monat-1 übergeben haben. Erlaubt sind also Werte von 0-11.
Wollen Sie nun ausrechnen, wie viele Tage seit dem Silvester 2010 vergangen sind, verwenden Sie dieses Skript
dNow = new Date();
dSilvester2010 = new Date(2010, 11, 31, 23, 59, 59);
nMillisecs = dNow – dSilvester2010;
nDays = Math.round(nMillisecs/(1000*60*60*24));
alert(„Seit Silvester 2010 sind “ + nDays + “ Tage vergangen“);
Der Divisor 1000*60*60*24 macht aus dem Ergebniswert in Millisekunden Tage (ein Tag hat eben so viele Millisekunden).
Geht es Ihnen nur um die reine Betrachtung von Tagen, dann können Sie beim Anlegen eines eines Date-Objekts auch die Zeitanteile weglassen, und etwa schreiben
dSommeranfang = new Date(2011,5,1);
Mehr Infos über die vielen Möglichkeiten mit dem Date-Objekt finden Sie zum Beispiel bei w3resource.com.
