naden.de/blog » Javascript

Vorsicht: PHP json_encode und numerische Arrays

naden — Fri, 23 Dec 2011 19:51:26 +0000

Auf den ersten Blick liefert die PHP-Funktion json_encode ein unerwartetes Ergebnis, wenn man ein Array mit numerischen Indizes umwandelt.

#1 fortlaufenden, numerische Indizes 0, 1 und 2

$a = array(5, 6, 7);

echo json_encode($a);

#1 Ausgabe: Array sieht wie erwartet aus

[5,6,7]

#2 Index beginnt bei 2

$b = array(2 => 'a', 'b', 'c');

echo json_encode($b);

#2 Ausgabe ist kein Array, sondern ein Objekt

{"2":"a","3":"b","4":"c"}

#3 Index beginnt bei 0 und macht dann einen Sprung auf 20

$c = array(5, 20 => 6);

echo json_encode($c);

#3 Ausgabe ist kein Array, sondern ein Objekt

{"0":5,"20":6}

Unerwartet aber es macht natürlich Sinn. Javascript kennt kein associativen Arrays, sondern nur fortlaufend nummerierte.

“Associative Arrays” werden in Javascript als Objekte abgebildet, da ist ist es von json_encode natürlich richtig, in diesem Fall so zu verfahren.

onNodeInserted jQuery Plugin

naden — Thu, 22 Dec 2011 17:20:36 +0000

Bei stark ajax-lastigen Oberflächen habe ich immer eine Möglichkeit gesucht, auf neu eingefügte DomNodes meist zu Formatierungszwecken Javascript-Funktionen anzuwenden global, ohne die immer wiederkehrenden Aufrufe in jedem onSuccess-Handler.

Das ist nicht immer über simple CSS-Angaben möglich, besonders dann nicht, wenn man HTML ohne Klassenangaben geliefert bekommt oder einen clientseitigen Tablesorter nutzen möchte etc.

jQuery bietet seit einiger Zeit mit live(); eine Möglich um Events auch an zukünftige Elemente zu binden. Das lässt sich zwar auch für Custome-Events nutzen, diese muss man aber explizit triggern.

Die Möglichkeit, die ich gebaut habe ist sehr experimentell und nicht für Produktivsysteme geeignet.

Dazu habe ich ein jQuery-Plugin geschrieben, was das Event DOMNodeInserted überwacht und, wenn einer der definierten Selektoren greift den dazu passenden Callback-Handler aufruft.

Als Selektor kann jedes Konstrukt benutzt werden, dass jQuery.is() versteht, was uns eine enorme Flexibilität gibt. Diese ist auch wichtig, den Selektoren sollten so genau wie möglich definiert sein, sonst können leicht 10.000 von Aufrufen zustande kommen, wenn ein etwas allgemeineres Element eingefügt wird. Das wäre dann ein echtes Performanceproblem.

Die Nutzung ist sehr einfach, hier ein Beispiel

Als Test Html nehmen wir eine unsortierte Liste, die bereits zwei Elemente enthält.

Nun initialisieren wir unseren Event-Listener mit einem selectorMap genannten Objekt, was als Schlüssel unsere jeweiligen Selektoren und als Werte die dazu passenden Callback-Handler enthält. Hier überwachen wir alle Listen darauf, ob ein neues Listenelement oder ein neues Listenelement mit einem enthaltenen Link eingefügt wird.

$.onnodeinserted({

selectorMap: {

‘ul li’: function(el, selector) {

$(el).css({color: ‘red’});

‘ul li a’: function(el, selector) {

$(el).css({fontWeight: ‘bold’});

$.data(el, ‘nonce’, Math.random());

}

});

Zu Testzwecken fügen wir nun einige Elemente hinzu.

$('

‘, {text: ‘and a young tree’}).appendTo(‘ul’);$(‘ul li:nth(1)’).html($(‘‘, {href:’#', text: ‘two’}));

Nun entfernen wir den Even-Listener wieder, der folgende Aufruf wird nun nicht mehr abgefangen.
$.onnodeinserted('destroy');
$(‘

‘, {text: ‘one more’}).appendTo(‘ul’);Demos mit allen Optionen
Demo

Download

Download

Einschränkungen:

ich nutze das Event DOMNodeInserted, was als deprecated

gekennzeichnet ist

im Internet-Explorer funktioniert es erst ab Version 9

5 Wege um Parameter an Javascripts zu übergeben

naden — Tue, 29 Nov 2011 12:24:50 +0000

Über die Jahre habe ich so einige Methoden ausprobiert, um an externe Javascript-Dateien GET-Parameter zu übergeben. Diese habe ich nun in einem Post zusammengefasst. Die Scripte sind simpel gehalten. Für den Einsatz in der Wildnis würde sich noch die eine oder andere Fehlerüberprüfung anbieten. Enjoy!

#1

Die simpelste Methode übergibt GET-Parameter an das eingebundene Script, so wie man es mit jeder Url machen würde.

Einbindung

<script type="text/javascript" src="javascript-params-1.js?id=1&language=de">script>

Script

function getParams1() {
  var scripts = document.getElementsByTagName('script'),
      tokens = scripts[scripts.length - 1].src.split('?')[1].split('&'),
      params = {};
 
  for(var k=0; k<tokens .length; k++) {
    var tmp = tokens[k].split('=');
    params[tmp[0]] = tmp[1];
  }
 
  return params;
}

Aufruf und Ausgabe

console.log(getParams1());

{
 id: "1",
 language: "de"
}

#2

In den eigenen Script-Tag werden beliebig viele zusätzliche data-Attribute eingebaut.

Einbindung

<script type="text/javascript" src="javascript-params-2.js" data-id="2" data-language="en">script>

Script

function getParams2() {
  var scripts = document.getElementsByTagName('script'),
      script = scripts[scripts.length - 1],
      params = {};
 
  for(var k=0; k<script .attributes.length; k++) {
    if(/data\-/.test(script.attributes[k].nodeName)) {    
      params[script.attributes[k].nodeName.substring(5)] = script.attributes[k].nodeValue;
    }
  }
 
  return params;
}

Aufruf und Ausgabe

console.log(getParams2());

{
 id: "2",
 language: "en"
}

#3

In den eigenen Script-Tag wird ein data-Attribute eingebaut, in dem ein anonymes Javascript-Object im JSON-Format eingebettet ist.

Einbindung

<script type="text/javascript" src="javascript-params-3.js" data-params="{id:3, language:'fr'}">script>

Script

function getParams3() {
  var scripts = document.getElementsByTagName('script');      
  return eval('(' + scripts[scripts.length - 1].getAttribute('data-params') + ')');
}

Aufruf und Ausgabe

console.log(getParams3());

{
 id: "3",
 language: "fr"
}

#4

In den eigenen Script-Tag wird ein anonymes Javascript-Object im JSON-Format eingebettet.

Einbindung

<script type="text/javascript" src="javascript-params-4.js">
{id: 4, language: 'it'}
script>

Script

function getParams4() {
  var scripts = document.getElementsByTagName('script');      
  return eval('(' + scripts[scripts.length - 1].innerText + ')');
}

Aufruf und Ausgabe

console.log(getParams4());

{
 id: "4",
 language: "it"
}

#5

In einem extra Script-Tag werden globale Javascript-Variablen definiert, die im Script ausgelesen werden können.

Einbindung

<script type="text/javascript">
param_id = 5;
param_language = "es";
script>
<script type="text/javascript" src="javascript-params-5.js">script>

Script

function getParams5() {
  return {id: window.param_id, language: window.param_language};
}

Aufruf und Ausgabe

console.log(getParams5());

{
 id: "5",
 language: "es"
}

Demo

Cross Domain Ajax Proxy

naden — Fri, 26 Aug 2011 11:18:54 +0000

Durch die sicherheitsbedingte “same domain policy” kann man per Ajax nur Daten von der eigenen Domain laden. Das stört oft, lässt sich aber mit einem 10-zeiligen serverseitigen PHP-Proxy leicht lösen. Wenn man diesen zusätzlichen Traffic aber auf die Clientseite verlagern möchte, muss man auf Drittdiente ausweichen.

Dazu gibt es einige kostenlose Dienste, die aber mehr offline als online sind. Einzig Google biete über ihre Feed-Api eine Lösung, auf deren Verfügbarkeit man sich verlassen kann. Google verlangt allerdings einen API-Key, den man erst nach einer Registrierung bekommt. Zudem läd Google einen ganzen Shitload an Javascript-Dateien nach, die man eigentlich gar nicht haben möchte.

Eine gute Alternative ist die von Yahoo! angebotene Yahoo! Query Language zu nutzen, die den Zugriff auf externe Datenfeeds in zahllosen Formaten erlaubt und ihre eigene Syntax an SQL anlehnt.

Um z.B. den JSON-Feed einer Facebook-Seite anzuzeigen reichen wenige Zeilen jQuery:

var query = "SELECT * FROM json WHERE url = 'http://www.facebook.com/feeds/page.php?id=106760056048493&format=json'";
 
$.getJSON('http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query.toLowerCase()) + '&format=json&callback=?', function(result) {
 
$.each(result.query.results.json.entries, function(k, v) {      
 
// ...
 
 });

Die Daten werden dabei über http://query.yahooapis.com/v1/public/yql?q= getunnelt.

Eine komplett funktionierendes Demo gibt es hier: Cross Domain Ajax Proxy Demo

YQL kann sehr viel mehr Datenquellen anzapfen, ein genaueres Angucken lohnt!

“Toggle Textfield Value” jQuery-Plugin

naden — Thu, 14 Apr 2011 13:46:12 +0000

Oft belegt man auf einer Webseite aus Designgründen die Werte von Textfeldern vor, z.B. mit “Suche …” für ein Suchfeld oder mit “E-Mail …” für die Anmeldung eines Newsletters. Das Javascript, was den Default-Wert onFocus zurücksetzt und onBlur wieder einfügt, wenn kein Wert angegeben wurde, ist simpel aber etwas hakelig, gerade wenn man mehrere solcher Felder auf einer Seite nutzt.

Diese Lücke schließt das kleine jQuery-Plugin. Damit reicht der folgende Aufruf, um die gewünschte Interaktivität zu erreichen.

$('#email').toggletextfieldvalue();

oder für 2 Felder

$('#email, #search').toggletextfieldvalue();

Mögliche Parameter und deren Standardwerte:

Name	Standardwert	Beschreibung
autoselect	false	auto select text on focus
mouseover	null	mouse over callback function
mouseout	null	mouse out callback function

Links:
Demo
Download minified
Download source

Custom Google Maps Marker

naden — Thu, 18 Nov 2010 16:16:44 +0000

Wenn man für Google Maps einen Marker mit einem eignen Icon erstellen will, dann sollte man den folgenden Fehler vermeiden:

Fehler: Nicht mit G_DEFAULT_ICON initialisieren

var icon = new GIcon(G_DEFAULT_ICON);

Das funktioniert in den ganzen Beispielen nur, weil die verwendeten Icons “zufällig” die richtige Größe haben.

Richtig: Ohne G_DEFAULT_ICON initialisieren, alle Werte selber angeben

var icon = new GIcon();
icon.image = "custom-marker.png";
icon.iconSize = new GSize(25, 29);
icon.shadow = "custom-marker-shadow.png";
icon.shadowSize = new GSize(40, 29);
icon.iconAnchor = new GPoint(0, 0);
// ...

Das so erstellte Icon kann ich nun ohne Probleme an meinen Marker übergeben:

var marker = new GMarker(point, {icon:icon});

Javascript Date Format

naden — Fri, 30 Jul 2010 09:40:51 +0000

Um mit Javascript ein Datum im Format d.m.Y zu bekommen muss man leider immer etwas zu viel Code schreiben.

Die ausführliche Form würde so aussehen und ist schon sehr grob:

function getCurrentDate(separator) {
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  var current_date = day + separator + month + separator + year; 
  return current_date;  
}

Mit einem bischen Javascript Voodoo bekommt man das gleiche Ergebnis mit dem folgenden Codeschnipsel:

function getCurrentDate() {
  with(new Date()) return [getDate(), getMonth() + 1, getFullYear()].join(arguments[0] || '.');
}

Javascript Bookmark

naden — Tue, 19 Jan 2010 20:16:37 +0000

Um per Javascript die aktuelle Webseite als Favorit im Browser zu speichern, gibt es die abenteuerlichsten Lösungen. Noch heute liest man auf vielen Seiten, bei Firefox bitte Strg+D drücken!

Meine Lösung, die schon seit Jahren so wunderbar funktioniert sieht wie folgt aus:

function bookmark(url, title) {
  // ist keine Url angegeben, wird der aktuelle Hostname genutzt
  var url = url || location.protocol + '//' + location.host;
  // um die aktuelle Url zu bookmarken, die vorherige Zeile
  // auskommentieren und die nächste einkommentieren.
  // var url = url || location.href;
 
  // kein Titel angeg. wird der aktuelle Hostname benutzt
  var title = title || location.host;
  // um den Titel aktuelle Url zu bookmarken, die vorherige Zeile
  // auskommentieren und die nächste einkommentieren.
  // var title = document.title;
 
  // Internet Explorer
	if(document.all) {
		window.external.AddFavorite(url, title);
	}
	// Firefox
	else if(window.sidebar) {
		window.sidebar.addPanel(title, url, '');
	}
  // false zurückliefern, fall die Funktion
  // über das "onlick"-Event des -Tags
  // aufgerufen wurde
  return false;
}

Der Aufruf sieht z.B. so aus:

Bookmark

oder

Bookmark

iframe Größe automatisch anpassen

naden — Tue, 03 Nov 2009 17:28:11 +0000

Um aus einem iframe heraus dessen Größe und Breite dynamisch an die Höhe des Inhalts anzupassen kann man den folgenden Javascript-Hack nutzen.

function resizeFrame(id, width, height) {
    var f = window.parent.document.getElementById(id);
    if(f) {
      if(f.contentDocument) {
        if(window.document == f.contentDocument) {
          f.height = height;
          f.width = width;
        }
      }
      else if(f.contentWindow) {
        if(window == f.contentWindow) {
          f.height = height;
          f.width = width;
        }
      }
    }
  }

Diesen sehr nützlichen habe ich aus dem default Adsense Script von Google extrahiert und etwas angepasst.

Hier ein Demo

Javascript konvertierung von Zahlen zwischen verschiedener Zahlensysteme

naden — Tue, 27 Oct 2009 15:06:11 +0000

Ich habe eine sehr gute Lösung gefunden, um Zahlen mit Javascript zwischen verschiedenen Zahlenbasen zu konvertieren.

function baseConvert(n, to, from) {
  return parseInt(n, from || 10).toString(to);
}
// Dezimal 10 nach Hexadezimal
baseConvert(10, 16); // A
 
// Hexadezimal 0xA (10) nach Binär
baseConvert(0xA, 2); // '1010'
 
// oder
baseConvert('A', 2, 16); // '1010'

Via: codesnippets.joyent.com