DOM: Javascript vs. C++

Musste das Syntax-Highlighting wegmachen, das hat das Layout zerstört

Ich geh gerade mal sterben. Beide Funktionen haben dieselbe Funktionalität, nämlich alles Bilder innerhalb einer Webseite zu “verstecken”. Hier der Javascript-Code

function RemoveImages(doc) {
  var images = doc.images;
    if (images != null) {
      for (var i = 0; i < images.length; i++) {
        var img = images.item(i);
        img.style.display = "none";
      }
    }
}

DOM: Javascript vs. C++ weiterlesen

Javascript: getter und setter

Nix spektakuläres, bin ich gerade rübergestolpert. Nachdem ich mich ja schon über Sichtbarkeit ausgelassen habe, kommt jetzt der Trick wie man getter und setter definiert.

Bisher hab ich das immer so gemacht:

function Field(val){
    /** @private */
    var value = val;

    /** @public*/
    this.getValue = function(){
        return value;
    };

    /** @public*/
    this.setValue = function(val){
        value = val;
    };
}

Ist auch wunderbar, allerdings bissle lästig das immer zu schreiben. Deshalb hier das ganze im “Mozilla Style”:

function Field(val){
    var value = val;

    this.__defineGetter__("value", function(){
        return value;
    });

    this.__defineSetter__("value", function(val){
        value = val;
    });
}

Potthässlich in der Tat, aber macht genau dasselbe wie der Code drüber. Wenn man jetzt ignoriert das “value” umbedingt private sein muss, dann sieht das sogar “schön” aus:

function Field(val){
    this.value = val;
}

Field.prototype = {
    get value(){
        return this._value;
    },
    set value(val){
        this._value = val;
    }
};

Bringt mir jetzt nicht so besonders viel, aber vielleicht brauchts ja jemand anders.

Links:

jQuery, Tooltip, show() und hide()

Nunja, endlich hab ich das Problem gelöst das ich hatte. Schön wenn man auf Banalitäten hingewiesen werden muss …

var _PendingHideLink;
var _PendingHideDiv;
$("#someDivId").hover(function() {
    if (_PendingHideLink) {
        clearTimeout(_PendingHideLink);
    }
    if (_PendingHideDiv) {
        clearTimeout(_PendingHideDiv);
    }
}, function() {
    _PendingHideDiv = setTimeout(function() {
        $("#someDivId").hide();
    }, 2000);
});
$(".someLinks").hover(function(e) {
    $("#someDivId").show();
}, function() {
    _PendingHideLink = setTimeout(function() {
                $("#someDivId").hide();
            }, 5000);
});

Das macht: Beim positionieren des Mauszeigers übern einen Link (“mouseover”) mit der Klasse “someLinks” wird das div mit der Id “someDivId” eingeblendet und nach 5 Sekunden wieder ausgeblendet. AUSSER man geht auf das eingeblendete div, dann bleibts offen, solange bis man das div wieder verlässt (“mouseout”). Dazu sollte man noch wissen das jQuery “hover” als Kombination versteht ($().hover == ($().mouseover; $().mouseout;)). Nunja, UND man sollte wissen das setTimeout eine Id zurückliefert die man mit “clearTimeout” wiederverwenden kann

MochiTest-Lite

Just a reminder to myself, because I want to try that extension:

Mochitest is a unit testing framework created by contributors to Mozilla projects. Mochitest is based on MochiKit , the incredibly useful Javascript library. MochiKit as the basis for writing unit tests has been proven very useful to developing Mozilla applications because of the thick layers of Javscript code in applications like Firefox.

What then, is Mochitest-Lite?
Mochitest, as it is used at Mozilla, requires Python to drive the command line interface, and automate the testing. Python is a very powerful tool for this purpose because, along with automation, it can overwrite and then rewrite configuration files like manifests and preferences, all while having a minimal impact on the application being tested. Mochitest also uses a client-server architecture to serve test documents to the application being tested. On top of that, an application needs to be built with the Mozilla build system to work with Mochitest.

This makes sense for large applications like Firefox, but what about a unit testing framework for developers of small XULrunner applications and extensions for existing Mozilla applications? These developers have different requirements. Mochitest-Lite is a way to get the same test writing tools and automation without the overhead of running Mochitest the same way it is used to test Mozilla code.

Vererbung in Javascript anhand von Exceptions

Hab noch zwei weitere Artikel gefunden, beide englisch:

Jop, ein weiterer Artikel zu Javascript. Und zur “komischen” Vererbung von Javascript.

Jeder Programmierer kennt Exceptions, diese netten Fehler die einen an den Kopf geschmissen werden, wenn was schief läuft. Auch sowas gibts bei Javascript:

try {
  doSomething();
} catch(e) {
  alert(e.toString());
}

Klassisches try/catch-Statement. Demnächst muss ich nochmal nachschauen wie man “verschiedene” Exceptions erkennt und dann getrennt behandelt. Nunja, weiter gehts, wir bauen uns eine Exception:

throw 42;
throw "I'm a string";
throw {toString: function() { return "I'm an object!"; } };

Alles wunderbar, aber String-Nachrichten schmeissen kann ja jeder. Kommen wir also zu der “BaseException”:

function BaseException(_message) {
	this.name = "BaseException";
	this.message = _message;
}
BaseException.prototype = {
	name : null,
	message : null,
	toString : function() {
		return this.name + ': "' + this.message + '"';
	}
}

Erstmal was ganz simples. Kann man z.B. so schmeissen und fangen:

try {
  throw new BaseException("foobar");
} catch (e) {
  alert(e.toString()); // alerts: "BaseException: foobar"
}

Schön, nicht wahr? Jetzt brauchen wir noch Vererbung:

// ripped from http://www.sitepoint.com/blogs/2006/01/17/javascript-inheritance/ 
function extend(descendant, parent) {
	var sConstructor = parent.toString();
	var aMatch = sConstructor.match(/\s*function (.*)\(/);
	if (aMatch != null) {
		descendant.prototype[aMatch[1]] = parent;
	}
	for (var m in parent.prototype) {
		descendant.prototype[m] = parent.prototype[m];
	}
};

Dies ist wohl leider notwendig. Diese “extend”-Function macht das irgendwie wohl cross-browser-kompatibel. Nunja, für Mozilla-only geht es auch anders. Nunja, “geerbt” wird jetzt so:

function OtherException(_message) {
	// call "super" constructor
	this.BaseException(_message);
	this.name = "OtherException";
}
// OtherException inherits from BaseException
extend(OtherException, BaseException);

Voilà. Fertig ist das Butterbrot:

try {
  throw new BaseException("foobar");
} catch (e) {
  alert(e.toString()); // alerts: "BaseException: foobar"
}
try {
  throw new OtherException("foobar");
} catch (e) {
  alert(e.toString()); // alerts: "OtherException: foobar"
}

Eclipse, Subversion und Spket

Die drei Sachen verwende ich gerade. Da aber irgendwie gerade was abschmiert, steige ich mal auf “unstable” (aka 3.5M3)um:

http://download.eclipse.org/eclipse/downloads/

Eclipse Update URLs:

public, private und “privileged” in Javascript

Jetzt wirds hässlich. Natürlich gibts “public” und “private” auch in Javascript. Allerdings, wie immer, ein bisschen anders:
Public

function Constructor(value) {
    this.membername = value;
}
Constructor.prototype.membername = value;

myConst = new Constructor("foobar");
print myConst.membername; // prints 'foobar'

Private

function Constructor(value) {
    var self = this;
    this.membername1 = value; // public member
    var membername2 = value + "private"; // private member
    function membername() { // private method
        print self.member; //access to public member in private method
        print membername2; // access to private member in private method
    }
}

myConst = new Constructor("foobar");
print myConst.membername1; // prints 'foobar'
print myConst.membername2; // prints 'undefined'
myConst.membername(); //no such function

Wenn man jetzt aber z.B. mittels dem property “prototype” auf private-members zugreifen will, dann wird man scheitern. “public” hat keinen Zugriff auf “private”. Dazu muss man die “privileged”-Methoden verwenden.

Privileged

function Constructor(value) {
    this.membername = function membername() {
        print "hi";
    };
}

myConst = new Constructor("foobar");
myConst.membername(); // prints "hi"