Archiv der Kategorie: Web

Slippery When Wet #4: this is it – the this keyword in Javascript

Schreibe eine Antwort

I proudly present to you the fourth in a infinite number of posts of “Slippery When Wet.” In these posts I show you a little bastard I stumbled on.

Coming from the C++/C#/Java world, the ‚this‘ keyword is well known for accessing the instance of the class itself. For accessing members, it is not mandantory but often favored for clearness.

With this background, a first try could look like this (complete html page in the package, file this1.html):

var marc = {
    name: "Marc",
    hello: function(visitor) {
        document.write("Hello " + visitor + ", my name is " + name + "!")
    }  
}

window.onload = function()
{
    marc.hello("Peter");
}

And the output is:

Hello Peter, my name is !

OK, let’s try again!
We call the name property explicit (this2.html):

        document.write("Hello " + visitor + ", my name is " + this.name + "!")

And the output is, as expected:

Hello Peter, my name is Marc!

So, it’s a piece of cake, we have only to put the this keyword for all members, and we’re done…

Wait, not so fast, youngster!

Let’s try it with a function reference like in the next example (this3.html):

var marc = {
    name: "Marc",
    hello: function(visitor) {
        document.write("Hello " + visitor + ", my name is " + this.name + "!")
    }  
}

var greet = marc.hello;

window.onload = function()
{
    greet("Peter");
}

And the output is:

Hello Peter, my name is !

The name is lost again!

This problem occurs because JavaScript doesn’t support implicit binding in a way C++ and others do.

With calling the function through the function reference, the this inside the hello function points not to marc but to the window. To verify this thesis, we just add a name to the window:

var marc = {
    name: "Marc",
    hello: function(visitor) {
        document.write("Hello " + visitor + ", my name is " + this.name + "!")
    }  
}

var greet = marc.hello;

window.name = "Sue";

window.onload = function()
{
    greet("Peter");
}

And the output is:

Hello Peter, my name is Sue!

But how can we solve this problem? The two easiest solutions are apply and call:

var marc = {
    name: "Marc",
    hello: function(visitor) {
        document.write("Hello " + visitor + ", my name is " + this.name + "!")
    }  
}

var greet = marc.hello;

window.onload = function()
{
    greet.apply(marc, ["Peter"]);
    document.write("<br />");
    greet.call(marc, "Peter");
}

And the output is:

Hello Peter, my name is Marc!
Hello Peter, my name is Marc!

With apply and call, you do an explicit binding. The object you pass as the first argument (in our example marc) does not need to have the function itself, but should of course have the members that are used inside the function.
The difference of apply and call is only in the signature of the function. With apply, the parameter have to be passed inside an array. With call, the parameters are lined up after the explicit binding object.

This should give you some ideas to identify problems coming from the binding and some solutions to solve them.

For further reading i suggest the following articles:

Fremde Webseite online editieren

Schreibe eine Antwort

Ein kleiner Trick im Firefox (getestet mit Version 4.0.1):

Einfach eine Webseite laden und dann folgende Zeile in das Adress-Feld eingeben und Enter drücken:

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

Erstmals ist keine Änderung ersichtlich. Man kann jetzt aber z.B. einen Text markieren und editieren. So kann man einfach kleine Änderungen vornehmen. Diese werden natürlich nicht gespeichert sondern gehen beim nächsten reload wieder verloren.

Weitere Tricks nehme ich gerne in den Kommentaren entgegen.

Piwik in Version 1.5 erschienen

Schreibe eine Antwort

Piwik ist in der Version 1.5 erschienen.

Neben einem wichtigen Sicherheitsupdate sind dies die (aus meiner Sicht) wichtigesten Neuerungen:

  • Diagramme mit Canvas und jQuery – keine Flash-Diagramme mehr
  • Eigenes Logo hochladbar um Piwik zu individualisieren
  • Ecommerce Analytics

Für diesen Release wurden 55 Tickets abgearbeitet.

Piwik in Version 1.4 erschienen

Schreibe eine Antwort

Und es geht Schlag auf Schlag weiter: nachdem diesen Monat schon Version 1.3 erschienen ist, wurde nun auch schon Version 1.4 veröffentlicht.
Hier die (aus meiner Sicht) wichtigesten Neuerungen:

  • Automatische Reports können nun auch als HTML generiert werden
  • Die automatischen Reports funktionieren nun auch, wenn keine cron-Tasks eingerichtet werden können
  • Experimenteller IPv6 Support

Für diesen Release wurden 31 Tickets abgearbeitet.

Info-Offensive für Piwik

Schreibe eine Antwort

Zwei deutschsprachige Artikel haben den Fokus auf Piwik gerichtet:

Der erste Artikel über den Einsatz von Piwik habe ich im c’t 7/2010 gefunden. Neben einigen Tricks für das Einrichten und den Einsatz in Foren und Shops hat es auch Informationen zu Datenschutzbelangen.
Der zweite Artikel, erstellt vom Unabhängiges Landeszentrum für Datenschutz Schleswig-Holstein, befasst sich haptsächlich mit Datenschutzbelangen. Das Datenschutzzentrum stellt Piwik dabei ein gutes Zeugnis aus (besonders verglichen mit anderen Web-Tracking-Angeboten), sieht aber auch noch Verbesserungspotential. Voraussetzung für einen legalen Einsatz (gemäss deutschem Datenschutzgesetz) sind aber verschiedene Konfigurationen, die im Artikel ausführlich erläutert werden.

Es ist zu hoffen, dass diese beiden Artikel Piwik einen weiteren Popularitätsschub verpassen werden.

Mehrere Content-Type in HTTP-Header

Eine Antwort

Aufgrund der Probleme mit mehreren Content-Type-Elementen im HTTP-Header wollte ich wissen, was der Standard dazu meint.

Das Hypertext Transfer Protocol (HTTP) in der Version 1.1 ist im RFC 2616 beschrieben.

In Kapitel 4.2: Message Headers, letzter Abschnitt, ist allgemein zu mehreren Feldern mit dem selben Namen zu lesen:

Multiple message-header fields with the same field-name MAY be present in a message if and only if the entire field-value for that header field is defined as a comma-separated list [i.e., #(values)].

Als Beispiel schauen wir uns Kapitel 14.1: Accept an:


Accept         = "Accept" ":"
                        #( media-range [ accept-params ] )

Nun schauen wir uns im Kapitel 14.17: Content-Type die Definition desselbigen an:


Content-Type   = "Content-Type" ":" media-type

Nach dem Standard ist folglich die Aussage bei TCPDF falsch, es sei ein Bug von FastCGI. Es ist TCPDF, das sich nicht an den Standard hält.
Da die Browser aber damit zurecht kommen und auch bei anderen Anwendungen mehrere Content-Type Werte zurückgeliefert werden, wäre es für die Kunden von Web-Hostern hilfreich, wenn FastCGI etwas toleranter wäre.