Javascript ist Toll!

Rechnen mit der Zeit

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 mit Zeitangaben gerechnet werden kann.

OOP in Javascript – Teil 1

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.

1. Teil 1. - OOP in Javascript
2. Teil 2. - MOC my Object Creator
3. Teil 3. - Vergleiche und Benchmarks

Die 4 fiesesten Javascript IE Probleme

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.

Vergleiche mit Javascript

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)

);

Der Wert ist nicht wahr und er ist aber auch nicht unwahr. Wie kann das sein?

Speed up your Javascript – Video

Aktuell wird überall und dort, ein Video von Douglas Crockford gehyped, in dem dieser einige Aspekte von Javascript beschreibt. Der (englischsprachige) Vortrag unter dem Motto Javascript the good parts, geht tief in die Anwendung von Javascript.

Logisch! Douglas Crockford ist der Javascript Guru, insofern ist diese Aufmerksamkeit berechtigt. Aber seit gestern ist auf you tube ein weiterer hochinteressanter Javascript Vortrag im Google TechTalks Channel vorhanden. Unter dem Titel speed up your Javascript beleuchtet Nicholas C. Zakas die Interna von Javascript näher.

In dem einstündigen Vortrag erklärt Nicholas die Wirkungsweise von Javascript und wo mit diesem Wissen sich die Geschwindigkeit optimieren läßt.

String Erweiterungen

Eine der Eigenschaften von Javascript, die sie von anderen Programmiersprachen abhebt, ist die prototypische Vererbung. Kurz gesagt bedeutet das, dass jedes Objekt eine Eigenschaft .prototype besitzt, von dem alle erzeugten Instanzen dieses Objektes erben. Diese Art der Vererbung hat Vorteile und auch viele Nachteile, mit denen sich etliche Artikel im Internet beschäftigen. Deshalb möchte ich auch hier gar nicht näher darauf eingehen, sondern eine Besonderheit dieser Methode zeigen, mit der es möglich ist in Javascript vordefinierte Objekte um Funktionen zu erweitern, die oft vermisst werden.

Das String-Objekt bietet sich für diese Erweiterungen ganz besonders an, da es häufig zum Einsatz kommt und leider auch ein paar häufig benötigte Funktionen nicht kennt.

Online Molmassen Rechner

Ein kleines Skript aus der Welt der Chemie.

Der Molmassenrechner brechnet die Molmasse einer Verbindung. Dazu parst das Skript die eingegebene Zeichenkette und versucht die Zusammensetzung der Verbindung zu ermitteln. Daraus läßt sich dann die Molmasse(molare Masse) der Verbindung errechnen.

Das Skript kann mit einem geklammerten Ausdruck und Kristallwasserangaben umgehen. Eine Verbindung mit mehreren Klammern, kann in dieser Version noch nicht berechnet werden. Das Skript rechnet aber einfacher und exakter, als die auf Wikipedia verlinkten Molmasse Rechner.

BB Code Buttons

Ich hatte in der Vergangenheit ja schon einmal ein Skript vorgestellt, mit dessen Hilfe es möglich ist BB-Code in eine Textarea einzufügen. Um es einsetzen zu können, werden entsprechende Buttons benötigt, die z.b. über einer Textarea angezeigt werden und mit denen dann der Text entsprechend formatiert wird. Dazu habe ich das Skript erweitert und verbessert, sodass sich automatisch und leicht konfigurierbar, über eine Textarea, JS Buttons einfügen lassen.

Ich nutze den Code als Basis für Greasemonkey-Skripte, für einige Foren, die keine entsprechenden Buttons anbieten (z.b. das Forum auf Perlunity)

Das Skript ist relativ kompakt (knapp über 100 Zeilen mit Kommentaren) und funktioniert bei meinen Tests unter Windows XP, in allen gängigen Browser.

Benchmarks mit Javascript

Oft entfachen sich hitzige Diskussionen in Foren darüber, welche Funktion für einen Zweck geeigneter und/oder schneller ist. Dann muss ein Benchmark her, mit dem die Geschwindigkeit der unterschiedlichen Funktionen verglichen werden kann. Als langjähriger Perl Programmierer benutze ich häufig das Modul Benchmark mit dem sich das relativ leicht realisieren läßt. Ich habe ein Javascript geschrieben, das ähnlich arbeitet und hier vorstellen möchte.

LED Laufschrift mit Javascript

Im selfhtml Forum hatte jemand nach einer LED Anzeige mit JS gefragt. Da meine Suche im Netz nur entweder Flash Beispiele oder untaugliche JS Skripte erbrachte, habe ich ein kleines LED Anzeige Skript geschrieben.

Rubberband 2

Ich habe das Rubberband überarbeitet und hier ein Beispiel, wie aus einem vorhandenen Bild damit ein Ausschnitt markiert werden kann. Das Rubber-Objekt ist nach Außen weitestgehend gleich geblieben, intern sind aber neue Dinge hinzugekommen. Eine Funktion createBox(), erzeugt das DIV das für das Rubberband gebraucht wird, mit der entsprechenden Funktionalität und die Klasse Rect() bietet Methoden an, um Berechnungen mit dem Rechteck durch zu führen

aufgleitende Javascript Popups

Das folgende Skript öffnet ein HTML Element mit einer fliessenden Bewegung. Es gleitet auf, anstatt sofort sichtbar zu sein. Dies wird durch die CSS Eigenschaft clip() erreicht. Diese Technik funktioniert nur, wenn das Element absolut positioniert ist

Javascript Rubberband

Beschreibung

Um mit der Maus Bereiche zu markieren wird ein sogenanntes Rubberband (dt. Gummiband) benutzt. Die Funktionsweise ist aus Grafikprogrammen bekannt oder auch dem Windows Desktop. Wenn die Maus mit gedrückter linken Maustaste bewegt wird, wird ein rechteckiger Kasten gebildet, der den Bereich der ausgewählt werden soll markiert.

Dazu habe ich diese kleine Skript geschrieben, dass einfach in eine Seite eingebunden werden kann. Mit Hilfe von Events kann das Verhalten gesteuert werden.

Zebratabellen mit Javascript

Und noch ein Tabellenskript.

Eine große Tabelle sieht schöner aus wenn die Tabellenzeilen eine abwechselnde Hintergrundfarbe bekommen. Das wird in Zukunft - irgendwann mal - mit CSS 3 möglich sein, im Moment kann das aber noch kein Browser.

Deshalb kann man sich behelfen - entweder, indem die Zeilen abwechselnd mit einer entsprechenden Klasse versehen werden oder, wenn man nicht den HTML Code aufblähen möchte, mit JS. Genau dazu habe ich dieses kleine Skript geschrieben, dass den entsprechend markierten Tabellen (wenn sie die Klasse zebra haben), den Zeilen abwechselnd die CSS-Klasse odd hinzufügt.

Sonderzeichen maskieren

Gerade gelesen auf Perun Weblog. Da dachte ich mir das geht doch auch mit JS.

[Nachtrag 20.1.] Die erste Version hat alle Sonderzeichen in &#{ASCII-Code}; umgewandelt, ich habe sie nun um eine Umwandlung in die HTML Entities erweitert.

Tabellen sortieren

Das Skript macht eine HTML Tabelle sortierbar. Die Spalten können durch einen Klick auf die Titelzeile sortiert werden. Dazu ist es nur nötig, der gewünschten Tabelle, die CSS-Klasse sortable zuzuweisen und den folgenden Javascript Code in die Seite einzufügen.

Klapptabelle mit Javascript

Ziel des Skriptes ist es, grosse Datentabellen übersichtlicher darzustellen. Eine Möglichkeit dazu ist z.b. Zeilen, die weitergehende Informationen zu einem Oberbegriff enthalten, mit einem Javascript zu verstecken und nur dann anzuzeigen, wenn der Benutzer auf ein entsprechendes Symbol klickt

Dazu werden die Tabellen mit der CSS Klasse class="klapptabelle"markiert. Jede Zeile die den Oberbegriff darstellt, wird mit class="main" markiert.
Das Skript durchsucht die entsprechend markierten Tabellen und blendet alle Zeilen aus die nicht das Attribut class="main" haben. Ausserdem fügt es automatisch ein Grafiksymbol in die die erste Zelle ein, die den Zustand der Zeilen anzeigt.

focus() Probleme mit Firefox

Firefox hat seit Urzeiten Probleme mit dem setzten des focus auf ein Textfeld in bestimmten Fällen. Einmal wenn der Fokus unmittelbar nach einem onblur Event gesetzt werden soll oder wenn vor dem Fokus ein alert() Fenster geöffnet wird.

Die Lösung, die in obigen Artikel beschrieben wird, autocomplete zu deaktivieren, funktioniert zumindest in der 2'er Version nicht mehr. Die einzige Lösung scheint zu sein, unmittelbar nach einem blur Event oder alert() Fenster den focus wieder auf ein Feld zu setzen, ist ein Timeout abzuwarten. Dazu reicht ein Timeout von einer Millisekunde.

Beispiel

function setFocus(el) {

    var self = el;

    if(el.value) return;

    alert('Kein Text!');

    window.setTimeout( function() { self.focus();}, 1);

}

Beschreibung

Beim verlassen der Felder wird geprüft ob ein Text eingeben wurde. Ist es leer, erscheint eine Meldung. Nach dem wegklicken des Meldungsfensters soll das Eingabefeld den Fokus erhalten. Im ersten Fall nach einem kurzen Timeout, im zweiten ohne

Breite des Fensterscrollbalken

Mit dem folgenden Code sollte sich die Breite des Scrollbalken des Browserfenster berechnen lassen.

Wie kann man ein Array mischen?

Ich hab mal wieder ein altes Stück Code ausgegraben, was vielleicht für den einen oder anderen nützlich sein könnte. Die Frage ist, wie kann man ein Array mischen? Ich verwende hier wieder Array.prototype um das Array Objekt um die Methode shuffle() zu erweitern. [... weiterlesen]