Alle, die sich mit Javascript beschäftigten, kennen wohl die Fehlerkonsole (z.b. im Firefox zu finden im Menü Extras). Mit ihr lassen sich leicht Fehler in Skripte finden und ist daher bei mir meistens - neben dem normalen Browserfenster - geöffnet. Das sie außerdem noch CSS Fehler als Warnungen anzeigt, finde ich persönlich auch sehr praktisch. Da sich im CSS schnell mal Tippfehler einschleichen und sich nciht sofort bemerkbar machen.
Doch was mir in letzter Zeit immer häufiger auffällt, ist dass Seiten im Netz, gerade von großen Anbietern, die Fehlerkonsole regelrecht fluten. Teils hängt das damit zusammen, dass Firefox manche CSS Eigenschaften noch nicht ohne suffix akzeptiert (z.b. border-radius) oder dass IE Hacks, wie zoom, ihm unbekannt sind. Aber viele der Meldungen sind deutliche Hinweise auf Fehler und ich frage mich oft, kennen die Entwickler von solchen Seiten nicht die Fehlerkonsole?
Das fängt schon hier mit WordPress an. Gerade in dem Moment, wo ich diesen Text schreibe, läuft die Konsole voll mit Meldungen, die ohne Probleme und Aufwand vermieden werden können:
Warnung: Die 'charCode'-Eigenschaft eines keyup-Ereignisses sollte nicht verwendet werden. Der Wert ist bedeutungslos.
Quelldatei: xxxxxx
Zeile: 0
Tweening und Transition sind zwei Begriffe aus der Welt der Computeranimation. Heute möchte ich eine Klasse zeigen, wie diese Techniken auch bei Javascript Animationen Verwendung finden.
Das Prinzip der Techniken ist relativ schnell erklärt.
Bei einer normalen Animation, wie sie z.b. auch mein aufgleitendes Popup benutzt, ist die Veränderung des Wertes (hier die Höhe und Breite) linear zur Zeit. In jedem Interval werden die Werte um den gleichen Wert verändert. Dadurch wirkt die Animation statisch und langweilig.
Ein weiterer großer Nachteil dieser Methode ist, dass wenn der Ablauf einmal haken sollte, z.b. weil die Berechnung länger dauert oder der Browser einen kurzen Moment mit etwas anderen beschäftigt ist, dann stockt die Animation kurz und wird danach einfach fortgesetzt, es findet also keine flüssige Ausführung statt.
Ausserdem läßt sich die Ausführungszeit nur verändern, in dem der Abstand der einzelnen Schritte in jedem Interval, vergrößert oder verkleinert wird.
Das folgende Diagramm, zeigt den Ablauf solch einer Art der Animation. Die horizontalen Achse ist die Zeit und vertikal, der Wert der Änderung (in dem Beispiel des aufgleitenden Popups, wär das die Breite oder die Höhe):
Um mit Stunden und Minuten rechnen zu können, müssen diese umgewandelt werden. Entweder in eine Dezimalzahl, die die Minuten und Sekunden in Bruchteilen angibt oder in eine ganze Zahl, wie in diesem Artikel bei Selfhtml beschrieben.
Eine Angabe hh:mm:ss wird dort einfach in Sekunden umgewandelt, mit dieser Zahl läßt sich dann leicht rechnen. Ich habe dieses Verfahren genutzt, um eine kleine Klasse zu schreiben, mit der in Javascript leicht Zeitangaben addiert und subtrahiert werden können.
Heute mal schnell etwas völlig anderes, auf diesem Blog. In erster Linie, damit es auch vielleicht anderen Linux DAUs, die dieses Problem ebenfalls haben, hilft.
Ich habe einen neuen Rechner von Dell und wollte darauf, neben dem bestehenden Windows 7, Ubuntu 10.04 installieren. Dabei gab es zwei Probleme.
Das Erste war relativ leicht lösbar, bzw. ist es eigentlich keines, solange man nicht selber Hand an die Partionierung vom Linuxinstaller legen will. Ich wollte das und plante drei Partitionen. Eine für Windows, eine für Linux und eine für Daten. Die für die Daten, ließ ich bei der ersten Installation weg und wollte sie nachträglich erzeugen. Was ein Fehler war! Denn dadurch wurde ich erst nach der Installation von gparted darauf aufmerksam gemacht, dass ich nur vier primäre Partionen auf eine Festplatte machen darf.
Maximal vier primäre Partitionen
Dumm gelaufen! Dell installiert nämlich drei primäre Partitionen für verschiedene Zwecke und so bleibt nur noch eine übrig. Da ich nicht ein Drittel der Festplatte ungenutzt lassen wollte, blieb mir nichts anderes übrig, als den ganzen Vorgang noch einmal von vorne zu starten. Doch dann begannen erst die eigentlichen Probleme.
Mein erster Versuch hier einen Artikel über Vererbung in JS zu schreiben, scheiterte an einem Punkt den ich übersehen hatte. Daher hier eine neue zweite Version. Ich werde den Artikel aber in drei Teile aufsplitten.
Der Mensch ist ein Gewohnheitstier und mich nehme ich davon nicht aus. Schlimm wird es, wenn Dinge, an die ich mich gewöhnt habe, sich ohne mein Wissen ändern. Automatische Updates, so nützlich sie auch sind, sind eine ideale Quelle für solche kleine Nicklichkeiten im Alltag.
Ich frag mich warum ich diesen Artikel nicht schon viel früher geschrieben habe. Ich habe diese Probleme schon viele Male gelesen und immer wieder musste ich selbst suchen wo das Problem liegt. Ich habe also oft genug selbst mit diesen Problemen zu kämpfen gehabt und habe wertvolle Lebenszeit damit verschwendet, Bugs zu finden, die keine waren.
Deshalb habe ich hier mal die Liste der größten und am schwersten zu findesten IE Bugs beim programmieren von Javascript, zusammengestellt.
Das war mir bisher nicht bewusst, wie wahrscheinlich vielen anderen auch nicht. Eine leere src-Angabe in einem img Tag verursacht einen Request und zwar auf das Verzeichniss in dem auch die eingebundene Seite liegt. Das Gleiche gilt für Bilder, die mit Javascript per new Image() erzeugt werden. Nähere Details beschreibt Nicholas C. Zakas auf seiner Seite.
Das Problem sind vor allem Server Skripte bzw. die darin enthaltenen Templates wo es schnell passieren kann, dass z.b. solche Einträge ein leeres src-Attribut erzeugen:
<img src="$variabel">
<img src="$variabel">
Es sollte zwar nicht kann aber u.U. vorkommen, wenn der Code einer dynamischen Seite nicht sauber programmiert wurde oder wenn ein Platzhalter vergessen wird.
Der einzige Browser, der sich davon nicht beeindrucken lässt ist Opera.
Vergleiche mit Javascript und ihre Merkwürdigkeiten. Eigentlich sollte man meinen, Vergleiche wären eine klare Sache. Entweder es ist etwas identisch oder nicht. Fertig!
So einfach ist es aber leider nicht. Da in Javascript eine automatische Typkonvertierung existiert, die zumindest in einen Sonderfall zu einem merkwürdigen Ergebnis führt. Entdeckt habe ich dieses Verhalten gestern in einem längeren Thread im selfhtml Forum. Dort war die Frage aufgetaucht, warum ("0" && "1") 1 ergibt (test). Im weiteren Verlauf stellten wir fest, dass die Vergleiche sehr seltsame Ergebnisse hatten. Z.b. der folgende Code:
var str ='0';
alert('str==true => '+(str ==true)+'n'+'!str==true => '+(!str ==true));
