Category: Programming

JavaScript-Objekte serialisieren

Bei komplexeren Anwendungen, ensteht schonmal das Bedürfnis, auf dem Rechner des Nutzers generierte JavaScript-Objekte, Arrays und sonstige Variablen an einen Server zu schicken. Nur leider funktioniert das nicht so ganz mit XMLHttpRequest, da POST nur eindimensionale Parameter unterstützt.

Allerdings bietet PHP mit unserialize() eine schöne Funktion, um aus Plaintext beliebig komplexe Variablen zu erzeugen. Jetzt muss man nur noch das JavaScript-Objekt in einen solchen serialisierten String umwandeln und auf dem Server wieder entserialisieren:

serialize = function(elem) {
  if (elem == null || elem == undefined || elem.constructor == Function) return 'N;';

  switch (elem.constructor) {
    case String:  return 's:' + elem.length + ':"' + elem + '";';
    case Number:  return (elem % 1 ? 'd:' : 'i:') + elem + ';';
    case Boolean: return 'b:' + (elem ? '1' : '0') + ';';     
    case Date:    return serialize(elem.getTime());
    case RegExp:  return serialize(elem.toSource());
    case Error:   return serialize(elem.message);
    case Array:
    case Object:
      var content = '', i = 0;
      for (var j in elem) { content += serialize(j) + serialize(elem[j]); i++; }
      return 'a:' + i + ':{' + content + '}';
    default:
      return serialize(elem.toString());
  }
}

Standardobjekte, die beispielsweise mit { } erstellt wurden, werden zu Arrays konvertiert, da es nicht so viel Sinn gibt, sie in PHP als Objekte anzusprechen - sie sind ja letztendlich nur Hashes. Wenn das JS-Objekt allerdings etwas komplexer ist, also nicht den Konstruktor Object hat, kann man die Serialisierungsfunktion natürlich trotzdem nutzen. In der toString()-Methode des jeweiligen Objekts, kann man beliebige einfachere Datentypen zurückgeben, die dann stattdessen serialisiert werden.

Achtung! Es ist nicht getestet, ob über unserialize() eventuell schadhafter Code auf dem Server ausgeführt werden kann. Also vorher gründlich testen oder doch JSON benutzen.

FireBug - CSS und DOM-Debugging im Firefox

Gerade eben gefunden: FireBug, ein wirklich sehr gutes Debugging-Werkzeug für alle Webentwickler. Das Teil ist eine große Hilfe beim Entwickeln von Webseiten und auch beim Debuggen von JavaScripts. Sehr nützlich finde ich persönlich die Events-Leiste, die alle auftretenden Events auflistet. Um das etwas übersichtlicher zu Gestalten (es werden auch sämtliche mousemove-Events aufgelistet) kann man einfach ein Suchwort eingeben, und es werden Beispielsweise nur noch mousedown-Events angezeigt.

Die Extension hat auch einen schönen Sourcecode und DOM-Inspektor. Außerdem bietet es eine JavaScript-Konsole, die sogar xmlHttpRequests anzeigt. Wenn man in der Sourcecodeansicht, die als übersichtlicher Baum daherkommt, auf ein Element zeigt, wird dies blau umrandet. So kann man sofort sehen, wo das entsprechende Element ist. Ein Stylesheet-Inspektor zeigt an, aus welcher CSS-Anweisung ein Format für ein bestimmtes Element kommt. Hilfreich um irgendwelche Spezifitätsfehler aufzuspüren. Der Entwickler verspricht auch, einen Debugger in die Erweiterung zu integrieren.

Zeiger in foreach

Auch wenn man schon einige Jahre mit PHP programmiert, stößt man immer wieder auf interessante Dinge - und damit meine ich nicht neue Funktionen wie die erweiterte OOP in PHP 5. Gerade eben ist mir aufgefallen, dass man in foreach-Schleifen den Parameter auch als ZeigerReferenz anlegen kann: foreach ($list as &$item). Wenn man jetzt $item veärndert, wird damit auch die entsprechende Variable in $list geändert. Bisher benutzte ich dazu immer foreach ($list as $key => $item) und änderte $list[$key]. Aber warum so umständlich wenn’s mit ZeigernReferenzen doch ganz einfach geht!

jQuery – New Wave Javascript

Gestern bin ich auf die JavaScript-Bibliothek jQuery gestoßen. Im Allgemeinen sind JavaScript-Bibliotheken immer überladen, enthalten Funktionen die man nie braucht und sind oft so geschrieben, dass es nahezu unmöglich ist, sie zu erweitern außer man hat sie selbst geschrieben. Aber jQuery macht alles anders. Und jQuery ist klein. 13 Kilobyte hat das aktuelle Release - und das kommt mit Funktionen zur Manipulation des DOM, einem ausgewachsenen CSS-Selektor und XPath-Interpreter und einer Effektbibliothek daher. CSS und XPath können sogar zusammen verwendet werden. Eine AHAH-Erweiterung gibt es auch.

jQuery-Code ist so ganz anders als normaler JavaScript-Code. jQuery-Funktionen können nämlich verkettet werden:

$('#navigation > a[@href^="http"]').
    prepend('<img src="/exclamation.png" />').
    find('img:first').fadeIn('slow');

Dieses Skript sucht erstmal alle externen Links (deren href-Attribut mit http beginnt), die direkt innerhalb eines Elements mit der ID navigation sind, fügt in diese Links an erster Stelle ein Bild ein und blendet dieses Bild dann langsam ein.

Mit “herkömmlichem” JavaScript hätte das sicher mehr als diese Zeile Code gebraucht (die nur zur besseren Lesbarkeit in mehreren Zeilen geschrieben ist). Es gibt sogar Kontrollstrukturen, wie z.B. each, die die übergebene Funktion auf alle Objekte anwendet oder find(expression), dass man mit end() wieder abbrechen kann.

Diese ganze Bibliothek ist äußerst gut dokumentiert und wird aktiv entwickelt. Der Entwickler ist übrigens der selbe, der auch denn addEvent-Recoding-Contest gewonnen hat.