Kategorie: Web Frontend

Wenn man einen Text mit Javascript so teilen will, dass man eine bestimmte Zeichenlänge nicht überschreitet, kann man die folgende Funktion verwenden, die aus einem Text und einer Zeichenlänge ein Array zurückgibt:

Bsp:

textArr  = textToArray ("Wordpress eigene Farben und CSS Klassen in den Editor einbauen", 20);
//textArr enhält ["Wordpress Plugin"] und ["selber erstellen Tutorial"]

     textToArray = function(text, maxLineCharactersCount){
    var textArr = new Array();
    var fragment = "";
    var lastCutPostion = 0;
    var lastPossibleCutPosition = 0;
    var charCounter = 0;
    var position = 0;
    $j.each(text, function(index, char) {
        if(char == " " && charCounter != 0)
        {
            if(charCounter > maxLineCharactersCount)
            {
                //console.log(charCounter- (position - lastPossibleCutPosition));
                fragment  = text.substring (lastCutPostion, lastPossibleCutPosition);
                //console.log(fragment);
                textArr.push(fragment);
                charCounter = -1 + (position - lastPossibleCutPosition);
                lastCutPostion = lastPossibleCutPosition + 1;
            }
            lastPossibleCutPosition = position;
        }
        position++;
        charCounter++;
    });
    //do not forget the last Word
   if(charCounter > 0)
   {
       fragment  = text.substring(lastCutPostion, text.length);
       //console.log(textWidth);
       if(charCounter > maxLineCharactersCount)
       {
           fragment  = text.substring (lastCutPostion, lastPossibleCutPosition);
           lastCutPostion = lastPossibleCutPosition + 1;
           textArr.push(fragment);
           fragment  = text.substring(lastCutPostion, text.length);
       }
       textArr.push(fragment);
   }   
    return textArr;
}

In der letzten Zeit erfreut sich JavaScript wieder größerer Beliebtheit. Für Freunde der objektorientierten Programmierung ist JavaScript allerdings etwas umständlich. Es gibt keine Klassen, keine Vererbung und keine privaten Attribute. Dennoch ist es möglich, in JavaScript objektorientiert zu programmieren.

Hierzu wird anstelle einer Klasse einfach eine Funktion definiert, die alle Attribute und Methoden enthält. Diese Funktion nennt sich Konstruktorfunktion. Man kann allerdings auch etwas tricksen, in dem man den Attributen das Schlüsselwort ‚var‘ voran stellt. Damit sind sie nur innerhalb der Klasse sichtbar (private statt public).

Um eine ganz allgemeine geometrische Figur darzustellen, kann der folgenden Programmcode verwendet werden:

function Figur() {}

Figur.prototype = {
 getBreite: function() {
 return this.breite;
 },
setBreite: function(b) {
 this.breite = b;
 },
getHoehe: function() {
 return this.hoehe;
 },
setHoehe: function(h) {
 this.hoehe = h;
 }
 }

Da gibt es zum einen den Konstruktor ganz oben. Wie auch in jeder Programmiersprache kann man in JavaScript beliebige Parameter angeben. Um die Attribute einer Klasse muss man sich an dieser Stelle nicht kümmern. Diese werden, wie in diesem Beispiel, über den Prototypen automatisch mit angelegt. Desweiteren werden direkt im Prototypen die Funktionen implementiert, die die Klasse bereitstellen soll. In diesem Beispiel sind das nur die Getter und Setter für die Breite und Höhe der Figur. Wie schon erwähnt, werden jetzt auch die Attribute mit angelegt. Zum Beispiel bei getBreite, wird mit dem Zugriff auf this.breite, die Variable angelegt und ist innerhalb der Klasse verfügbar.

Weiterhin ist auffällig, dass die Funktionen jeweils per Komma getrennt werden. Es ist also soetwa, wie eine Aufzählung der Funktionen.

Das Instanziieren der Klasse würde dann wie folgt aussehen:

meineFigur = new Figur();
meineFigur.setBreite(4);
meineFigur.setHoehe(6);

Vererbung

Will man jetzt eine ganz spezielle geometrische Figur, wie zum Beispiel ein Viereck anlegen, kann die Klasse Figur verwendet und erweitert werden. So kann eine Funktion hinzugefügt werden, um die Fläche der Figur zurück zu geben:

function Viereck() {}

Viereck.prototype = new Figur();
Viereck.prototype.constructor = Viereck;
Viereck.prototype.getFlaeche = function() {
 return this.getBreite() * this.getHoehe();
 }

Auch hier beginnt die Klasse mit dem Konstruktor. interessanter ist jetzt allerdings, dass die neue Funkton getFlaeche() zwar auch im Prototypen definiert wird, jetzt aber einen eigenen Eintrag erhält. Dem Prototypen der Klasse wird jetzt ein Objekt der Eltern-Klasse zugewiesen. Und den Konstruktor kann man auch nochmal explizit angeben, was aber optional ist.

Artikel von Tobias Spiesecke