trafex » JavaScript

MooTools 1.2 erschienen

StefanB — Fri, 13 Jun 2008 11:31:35 +0000

Nach einiger Zeit ist endlich MooTools 1.2 erschienen. Das JavaScript-Framework wurde fast ein Jahr nach dem letzten 1.11er Release veröffentlicht.

Einige der neuen Features der 1.2er Version:

bessere Domunentation
verbesserte Effekte
‘richtige’ Hash-Objekte
Swiff Objekt zur Interaktion mit Flash
die Möglichkeit zu jedem Element Metadaten zu speichern

Bei der Umstellung ist zu beachten, das sich an der API einiges getan hat und man somit evtl. etwas Arbeit in die Umstellung stecken muss – was sich aber meiner Meinung nach mehr als Lohnt.

Super Mario in 14kb Javascript

StefanB — Wed, 09 Apr 2008 10:00:56 +0000

Spiele in Javascript gibt es schon einige. Ein Klassiker ist z.B. Tetris als Javascript und Lemmings wurde auch schon in Javascript umgesetzt.
Als neuesten Spross der Javascript-Spieleumsetzungen hat Jacob Seidelin Super Mario in Javascript umgesetzt. Das besondere hieran ist, dass das komplette Script ohne externe Grafiken auskommt und trotzdem nur 14kb Platz (komprimiert) belegt. Ein paar Schönheitsfehlerchen hat das ganze noch, so gibt es anscheinend keine Pilze und nur ein Level - Cool ist es trotzdem!

Demo: ohne Musik oder mit Musik

Offtopic: Javascript – DIE Sprache der Zukunft?

StefanB — Tue, 08 Apr 2008 07:27:39 +0000

Da hat jemand im Stargate-Film “Stargate: The Ark of Truth” (Im Deutschen “Die Quelle der Wahrheit”) genau hingeschaut und entdeckt, das in der Zukunft wohl Javascript zum Programmieren verwendet wird. Den passenden Filmausschnitt gibt’s bei youtube.
Via Ajaxian

Bestimmte Links automatisch in einem neuen Fenster öffnen

StefanB — Mon, 07 Apr 2008 15:12:14 +0000

Wer kennt das Problem nicht: man verlinkt Dateien, z.B. in einer Galerie Links auf die große Ansicht der Bilder oder möchte das sich PDF’s nicht im aktuellen Browserfenster öffnen, sondern in einem neuen.
Wenn man dies manuell lösen möchte muss man nun bei jedem Link umständlich target=”_blank” anfügen.

David Walsh hat dafür eine eine Javascript-Lösung entwickelt, welche auf Mootools basiert und Links auf einer Seite analysiert und – je nach Dateiendung des Links – das target=”_blank” automatisch anhängt. Das Script lässt sich meiner Meinung nach auch sehr einfach an andere Javascript-Frameworks anpassen und ist ein interessanter Ansatz dieses Problem zu lösen und die Seite auch benutzbar zu lassen wenn der Betrachter Javascript abgeschaltet hat oder kein Javascript versteht.

Wenn innerHTML nicht schnell genug ist

StefanB — Thu, 10 Jan 2008 18:24:16 +0000

Es gibt mehrere Wege Inhalt auf einer Seite auszutauschen. Man kann das DOM Modell verwenden, welches von W3 Konsortium standardisiert worden ist. Die gebräuchlichere Variante ist jedoch in den meisten Fällen innerHTML zu benutzen. Auch ist die Verwendung von innerHTML mit den meisten Browsern schneller als die Verwendung der DOM Methoden.

Beispiel:

<p id="inhalt">Hier kommt beliebiger Inhalt
<a href="#" onclick="document.getElementById('inhalt').innerHTML='Und jetzt der neue Text';">Inhalt tauschen</a>

Wenn jedoch viele HTML-Elemente in dem zu tauschendem Inhalt sind, kann das Austauschen durchaus etwas Zeit in Anspruch nehmen.

Steven Levithan stellt in seinem Blog mit replaceHTML eine JavaScript-Funktion vor, welche diese Aufgabe schneller erledigen kann.

Code:

function replaceHtml(el, html) {
    var oldEl = typeof el === "string" ? document.getElementById(el) : el;
    /*@cc_on // Pure innerHTML is slightly faster in IE
    oldEl.innerHTML = html;
    return oldEl;
    @*/
    var newEl = oldEl.cloneNode(false);
    newEl.innerHTML = html;
    oldEl.parentNode.replaceChild(newEl, oldEl);
    /* Since we just removed the old element from the DOM, return a reference
    to the new element, which can be used to restore variable references. */
    return newEl;
};

Beispiel für die Benutzung:

// innerHTML
el.innerHTML = newHtml
 
// replaceHTML
el = replaceHtml(el, newHtml);

Wenn man nur wenige Elemente überschreibt macht die Benutzung von replaceHTML allerdings wenig Sinn. Seine Stärken kann die Funktion nur ausspielen wenn man wirklich viele Elemente austauscht. Und da vor allem beim Verwerfen von vorhandenen Elementen.
Einen kleinen Benchmark, der im Browser läuft, stellt er auch gleich zur Verfügung: Link