Slideshow Bob - JavaScript

Script-Entwicklung für Greasemonkey

nospam@example.com (Thomas Werner) — Thu, 11 Mar 2010 19:54:00 +0100

[TOC3]Greasemonkey ist eine nette, aber auch irgendwie anarchistische Firefox-Erweiterung, welche es erlaubt, von Benutzern selbst gebastelten JavaScript-Code auf x-beliebigen Websites auszuführen. Sinn und Zweck ist die Veränderung der Seiten. Klingt erstmal komisch, hat aber viele, viele sinnvolle Anwendungsgebiete, insbesondere auf populären Websites wie StudiVZ, Youtube und Co.
Mit Greasemonkey kann man Websites um Funktionalitäten erweitern, die so nicht angeboten werden. Da sind der Vorstellungskraft keine Grenzen gesetzt und darüber hinaus erleichtert einem diese Erweiterung sehr viel Arbeit, wenn man vorhat, eine kleine, eigene Erweiterung für Firefox zu basteln (was recht kompliziert ausfallen kann).

In diesem Artikel gehe ich auf die Script-Entwicklung mit Greasemonkey ein, erläutere Dinge, die man beachten muß und ein paar fiese Bugs, über die ich selbst gestolpert bin.

"Script-Entwicklung für Greasemonkey" vollständig lesen

JavaScript und das Krümelmonster

nospam@example.com (Thomas Werner) — Tue, 24 Nov 2009 19:15:44 +0100

Ich hab mich kürzlich erstmals mit dem Thema Cookies unter JavaScript beschäftigt und muß sagen: meine Fresse, das ist wirklich zum Haareraufen schlecht gelöst. Daher gibts jetzt von mir eine kleine Klasse, die den Umgang mit Cookies deutlich vereinfacht:

/**
* A Cookie Manager Class.
* @author tw
*/
function Cookie() {
/**
* Gets a cookie value by its name.
*
* @param name The cookie's name.
* @return String
*/
this.get = function(name) {
eval('var regex=/' + name + '\\s*=\\s*([^;]+)\\s*(;|$)/;');
var result = document.cookie.match(regex);
if(result) return result[1];
};
/**
* Sets a cookie.
*
* @param name The cookie's name.
* @param value The according value.
* @param expiresOn [Optional] A Date object specifying the expiration date.
* if omitted, the cookie expires in seven days from now.
*/
this.set = function(name, value, expiresOn) {
if(typeof expiresOn == 'undefined') {
expiresOn = new Date;
// Keep for a week
expiresOn.setTime(expiresOn.getTime() + 604800000);
}
document.cookie = name + '=' + value.paramEncode() + '; expires=' +
expiresOn.toGMTString();
};
/**
* Sets an "unlimited" cookie, meaning that the expiration date is set
* to the maximum.
*
* @param name The cookie's name.
* @param value The according value.
*/
this.setUnlimited = function(name, value) {
var expiresOn = new Date;
expiresOn.setTime(2147483647000);
this.set(name, value, expiresOn);
};
/**
* Deletes a cookie.
*
* @param name The cookie's name.
*/
this.remove = function(name) {
var expiresOn = new Date;
expiresOn.setTime(0);
this.set(name, '', expiresOn);
};
}

Verwendet wird der ganze Spaß folgendermaßen:

var cookie = new Cookie;
// Hält 7 Tage lang
cookie.set('meinCookie', 'xyz');
// Hält "ewig" - also genau genommen bis 2037 oder so:
cookie.setUnlimited('ewig', 'jaja');

Viel Spaß damit.

[JavaScript] Die Probleme einer Vererbungskette

nospam@example.com (Thomas Werner) — Mon, 23 Nov 2009 17:32:00 +0100

[TOC3]Ich habe zuvor bereits einen ausführlichen Artikel über die Möglichkeiten und Grenzen von Objektorientierung und Vererbung in JavaScript geschrieben (siehe Objektorientierte Programmierung in JavaScript).
Gerade eben bin ich allerdings auf ein handfestes Problem gestoßen, und zwar konnte ich mit der gängigen Technik nicht vernünftig die Kette von Eltern-Konstruktormethoden von einer tieferen Kindklasse aus aufrufen.

"[JavaScript] Die Probleme einer Vererbungskette" vollständig lesen

JSE v1.0 - Ein Quellcode-Editor für den Webbrowser

nospam@example.com (Thomas Werner) — Fri, 11 Sep 2009 17:07:00 +0200

Als ich vor zwei Jahren meinen Blog frisch einrichtete, veröffentlichte ich einen Artikel über meinen Quellcode-Editor, den ich damals in JavaScript schrieb. In erster Linie ließ ich meinen Ärger über die Cross-Browser-Problematik bezüglich Tastatur-Key-Codes aus, welche abhängig von Browser und Plattform voneinander abweichen können.

Aufgrund dieser und weiterer Probleme war das Projekt seither auch auf Eis. Ich hab's aber vorhin nochmal ausgegraben, weitgehend korrigiert, sodaß es immerhin einigermaßen sauber unter Firefox für Linux klappt und stelle es nun wie den Quellcode von PixPush ebenso zur freien Verfügung unter der Creative Commons 3.0 Lizenz.

Ebenso stelle ich eine Live-Testversion zum Rumspielen (bzw. Code schreiben) zur Verfügung.

Schön bunt sieht's aus. Einfach mal selbst ausprobieren: Live-Testversion

Features

Die Editor-Klasse ist recht flexibel gestaltet. So kann man sich eigene Regeln für simple Code-Completion sowie Syntax-Highlighting festlegen. Standardmäßig wird Hervorhebung für die Programmierspache Java unterstützt.
Ansonsten werden Look & Feel klassischer Quellcode-Editoren über Tricksereien nachgebildet.

Automatische Zeilennumerierung
Syntax-Highlighting
Navigation über Cursortasten sowie Bild auf und ab
Entfernen und Backspace funktioniert, wie man es von einem Editor erwartet
Tab-Taste für Zeileneinschub
Automatischer Zeileneinschub basierend auf vorangegangene Zeile

Quellcode und Support

Vorab: ich werde keinen aktiven Support bieten, es aber dennoch begrüßen, wenn ihr mir Feedback über Probleme an dieser Stelle als Kommentar zukommen lassen würdet. Ich geb' das Ding so frei wie es ist und werde allerdings nur dann daran weitermachen, wenn ich Zeit und Lust dazu habe.

Ich lade jeden dazu ein, selbst Verbesserungen und Erweiterungen vorzunehmen, sowie die vorhandenen Probleme bezüglich der Tastatur-Key-Codes usw. zu beheben (weitere Details zu den Problemen und TODOs befinden sich im Quellcode).
Über Rückmeldungen würde ich mich jedenfalls freuen, sollte jemand am Code etwas ändern oder den Editor irgendwo einsetzen.

jse.zip

PixPush 1.0 - JavaScript Bitmap-Malprogramm

nospam@example.com (Thomas Werner) — Wed, 09 Sep 2009 16:52:00 +0200

Screenshot von PixPush v1.0 - Selber damit rumspielen kann man hier: PixPush v1.0 Live-Version

Vor zwei Jahren veröffentlichte ich einen ausführlichen Artikel zum Thema Bitspiele - Schnelle Multiplikation der alten Schule. Der Anlaß war mein damals programmiertes, browser-basiertes Bitmap-Malprogramm, welches ich nun wie damals angekündigt unter der Creative Commons 3.0 Lizenz veröffentliche.

Auf folgender Seite kann man mit dem Malprogramm etwas herumspielen: PixPush v1.0 Live-Version.

Da zum damaligen Zeitpunkt der sogenannte Canvas-HTML-Tag nicht sonderlich weit verbreitet war, implementierte ich das Malprogramm auf Basis von DIV-Tags - daher leidet etwas die Performance. Unter Konqueror sollte man eher die Finger davon lassen. Unter Firefox und Opera läuft's an sich ganz gut.

Mit meinem PixelPush-Patrick mache ich mal den Anfang.

Wettbewerb

Schreibt mir Kommentare und schickt mir Links auf eure, mit PixPush erstellten, Kunstwerke. Hierbei zählen nur Screenshots der gesamten PixPush-Programmoberfläche. Es gibt hierbei keinen Einsendeschluß.

Zu gewinnen gibt es eventuell einen feuchten Händedruck - sollten wir uns einmal leibhaftig gegenübertreten.

"PixPush 1.0 - JavaScript Bitmap-Malprogramm" vollständig lesen

Objektorientierte Programmierung in JavaScript

nospam@example.com (Thomas Werner) — Tue, 21 Jul 2009 13:20:00 +0200

[TOC3] Objektorientierte Programmierung (OOP) ist in JavaScript eine ungewöhnliche Sache. Die ersten Einblicke in JavaScript-Code gaukeln einem alles vor, was man von OOP an sich gewohnt ist, aber Klassen sucht man darin vergeblich. Das liegt daran, daß JavaScript prototypbasiert ist. Es gibt also keine Klassen als Vorlage für Objekte, sondern Objekte wie String, Array etc. existieren bereits von vornherein, und werden über den "new"-Operator geklont, um neue Objekte zu schaffen, welche die gleichen Eigenschaften des Originals haben.

Dieser Artikel behandelt Techniken der Vererbung und wie man so etwas wie Klassenkonstrukte unter JavaScript nachbilden kann.
"Objektorientierte Programmierung in JavaScript" vollständig lesen

Annahme ausgelöst und nicht aufgefangen - oder JavaScript im Internet Explorer

nospam@example.com (Thomas Werner) — Mon, 27 Aug 2007 19:06:00 +0200

Eine JavaScript-Fehlermeldung des aktuellen Microsoft Internet Explorer 7. Offenbar verwechselten die Übersetzer "exception" mit "expectation".

Seit jeher beschert Microsoft uns Webdesignern und -programmierern mit seiner "Internet Explorer"-Produktserie (IE) eine schier unerschöpfliche Quelle an, zu meisternden, Herausforderungen.
Meine ersten Gehversuche in JavaScript, waren damals noch geprägt von einer gigantischen Menge an Inkompatibilitäten zwischen den großen Browsern (Netscape und IE), wobei die Räder gerne neu erfunden wurden, und die Hersteller für gleiche Funktionalitäten ihre eigenen Spezifikationen und Methoden bereithielten.
Dieses Problem läpperte sich im Verlauf der Jahre und die meisten Browser halten sich mittlerweile auch brav an die Standards.
Da ich mittlerweile hauptsächlich unter Linux entwickle, testete ich auch ein neues JavaScript-Projekt von mir, eine ganze Weile lang hauptsächlich unter Firefox, Konqueror sowie Opera, da bei mir der IE leider auch mit Hilfe von Wine und dem praktischen Tool IEs4Linux, mittlerweile nicht mehr funktioniert.
Gestern testete ich meinen Code allerdings unter Windows, um genau zu sein, unter Internet Explorer 7; und mußte feststellen, daß nichts, meiner harten Arbeit, darin laufen wollte.
"Annahme ausgelöst und nicht aufgefangen - oder JavaScript im Internet Explorer" vollständig lesen

Ein Array sagt mehr als tausend Worte.

nospam@example.com (Thomas Werner) — Sat, 03 Feb 2007 20:32:44 +0100

So auch ich selbst: JavaScript und Array-Funktionen. Ein bunter Strauß der guten Laune und Abendunterhaltung. Nicht.
"Ein Array sagt mehr als tausend Worte." vollständig lesen

Bunt und strukturiert - so muß es sein!

nospam@example.com (Thomas Werner) — Sat, 03 Feb 2007 17:40:42 +0100

Dies ist der Bildausschnitt eines typischen Quellcode-Editors - offenbar nichts Besonderes.

Es hat dennoch etwas Besonderes an sich, denn dieser Editor läuft eingebettet in einem beliebigen Webbrowser - weder über Java-Applet noch über ein Flash-Film, sondern mit Hilfe eines JavaScript-Programms.
"Bunt und strukturiert - so muß es sein!" vollständig lesen