Beispiel: JavaScript erweitern

In JavaScript ist es auf einfachste Weise möglich Objekte mit Attributen und neuen Methoden zu erweitern. Wie das geht zeigen wir Ihnen hier.

Eigene Attribute einführen

HTML kann man eine neue Dimension von Flexibilität geben, indem man die Konstruktionen in Standard-HTML mit eigenen Attributen versieht. Diese kann man dann mit JavaScript -Methoden manipulieren und so die erstaunlichsten Wirkungen erzielen.
In HTML kann man zwar nicht - wie etwa in XML - seine eigenen Tags einführen. Doch kann man in den Standard-Tags eigene Attribute ("Custom Attributes") vorsehen, wie zum Beispiel:

Ein solches Custom Attribute kann man dann lesen mit der Methode getAttribute(...), wie etwa:

if(div.getAttribute('xxx'))
  alert("div.xxx ist 'true'");
else
  alert("div.xxx ist 'false'");

Wenn Sie das versuchen, werden Sie feststellen, dass xxx als true bewertet wird - obwohl es doch als "false" gesetzt wurde (uzw. selbst dann, wenn es im HTML-Code nicht in Anführungszeichen geklammert wurde!)
Der Grund ist ganz einfach der, dass der Wert eines Attributs als String gespeichert wird. Der String "false" aber ist kein leerer String und wird deshalb in der if-Abfrage als true behandelt. Um den Wahrheitswert dieses Attributs richtig zu bewerten, sollte man die Abfrage daher stets etwas ausführlicher gestalten:

if(div.getAttribute('xxx')=="true")
  alert("div.xxx ist 'true'");
else
  alert("div.xxx ist 'false'");

Man könnte übrigens sogar auf "TRUE" abfragen:

if(div.getAttribute('xxx')=="TRUE")
  alert("div.xxx ist 'TRUE'");
else
  alert("div.xxx ist 'FALSE'");

Selbst wenn man sich bei dem Schlüsselwort "xxx" verschreibt (und z.B. Großbuchstaben verwendet), wird das Attribut immer noch richtig erkannt:

if(div.getAttribute('XXX')=="true")
alert("div.XXX ist 'true'");
else
alert("div.XXX ist 'false'");

Dynamisch setzen kann man ein Attribut mit der Methode setAttribute(). Der erste Parameter dabei ist der Name des Attributs, der zweite ist der neue Wert:

div.setAttribute('xxx',"yyy");

Nach dynamischem Setzen aber macht es einen Unterschied, ob Groß- oder Kleinbuchstaben. Versuchen Sie mal:

div.setAttribute('xxx',"yyy");
if(div.getAttribute('xxx')=="yyy")
  alert("'div.xxx' ist 'yyy'");
else
  alert("div.xxx ist nicht 'yyy'");

if(div.getAttribute('xxx')=="YYY")
  alert("'div.xxx' ist 'YYY'");
else
  alert("div.xxx ist nicht 'YYY'");

Sie wundern sich vielleicht, warum hier so ausführlich auf die Unterschiede von Groß- und Kleinbuchstaben eingegangen wurde. Doch wenn Sie das stets "im Hinterkopf" haben, können Sie mit Custom Attributes aus HTML und JavaScript die verblüffendsten Dinge herausholen!

Eigene Objekte einführen

Java Script ist nicht nur eine äußerst flexible Sprache - sie kann auch noch erweitert werden, mit "Custom Objects". Beim ersten Hinhören klingt das vielleicht abschreckend komplex - ist aber in Wirklichkeit ganz einfach.
Eigene Objekte kann man in JavaScript so ähnlich deklarieren wie die übliche function-Deklaration:

function Objekt(xx,yy,zz)
{
  this.length = 3;
  this.x = xx;
  this.y = yy;
  this.z = zz;
}

Merken muss man sich dabei nur drei Dinge:
1. Das Objekt, auf das sich die einzelnen Operationen innerhalb der Deklaration beziehen, wird stets mit dem Schlüsselwort this qualifiziert.
2. Die erste Zeile einer Deklaration ist stets this.length = ...; wobei ... die Zahl der folgenden Attribute dieses Custom Object ist.
3. Vor der ersten Verwendung eines Custom Object muss es erst einmal "instantiiert" werden. (Nach der Deklaration ist ein Custom Object zunächst so etwas wie ein "Bauplan", wie ein Objekt dieses Typs gebaut wird. Doch solange es noch keine "Instanz" davon gibt, ist eben noch nichts Greifbares davon da!)
Im Unterschied zu den Standardtypen (number, string, object und boolean) müssen Custom Objects stets explizit deklariert werden. Dabei können auch gleich seine Attribute initialisiert werden:

var o = new Objekt(1,2,3);

Wenn sie nun versuchen:

alert('o = '+o.x+','+o.y+','+o.z);

... dann sehen Sie, dass die drei Attribute x, y und z auf die Werte 1, 2 und 3 gesetzt wurden.
Ebenso gut hätten Sie o natürlich nur teilweise oder gar nicht initialiseren müssen (var o = new Objekt();).
Wenn sie nun wieder versuchen:

alert('o = '+o.x+','+o.y+','+o.z);

... dann stellen Sie fest, dass die drei Attribute x, y und z alle undefined sind.
Das ist aber natürlich kein Hindernis, das Objekt o genauso wie jedes Standardobjekt zu manipulieren. Zum Beispiel die folgende Funktion setzt die Attribute auf neue Werte:

function ManipulObjekt(obj)
{
  obj.x = 4;
  obj.y = 5;
  obj.z = 6;
  alert ('ManipulObjekt(): obj = '+obj.x+','+obj.y+','+obj.z);
}

Wenn Sie diese Funktion nun auf das eigene Objekt o anwenden, dann können sie es nachher wieder genauso verwenden wie jedes Standard-Objekt:

ManipulObjekt(o);
alert('Hauptprogramm: o = '+o.x+','+o.y+','+o.z);

Bei der Gelegenheit haben Sie übrigens - ganz unbewusst wahrscheinlich - etwas gemacht, was für Neulinge in JavaScript vielleicht "unmöglich" erscheint: Sie haben von einer Funktion mehrere Ausgabewerte zurückgegeben!

Eigene Methoden einführen

Java Script kann nicht nur um eigene Objekte erweitert werden - in dieser Sprache können auch eigene Methoden eingeführt werden. Wieder geht es dabei nur um ein paar Zeilen Code.
Eine eigene Methode ("Custom Method") zu einem eigenen Objekt ("Custom Object") kann ganz einfach dadurch eingeführt werden, indem man zusätzlich zu den Attributen noch einen Eintrag vorsieht, der eigentlich auf eine Funktion verweist. Sehen wir uns das an unserem altbekannten Beispiel an:

function Objekt(xx,yy,zz)
{
  this.length = 4;
  this.x = xx;
  this.y = yy;
  this.z = zz;
  this.Quersumme = Abc;
}

"Quersumme" ist der Name, unter dem diese Methode angesprochen wird. this.Quersumme verweist auf eine Funktion beliebigen Namens, die das zurückliefert, was hier als "Quersumme" bezeichnet wird. (Normalerweise wird es sinnvoll sein, diese Funktion mit demselben Namen zu bezeichnen; doch formal erforderlich ist das nicht.) Diese Funktion könnte so aussehen:

function Abc() { return (this.x + this.y + this.z) }

Wie üblich, muss ein Custom Object vor der ersten Verwendung "instantiiert" werden (und kann dabei auch gleich initialisiert werden):

var o = new Objekt(1,2,3);

Diese Methode kann dann in Bezug auf das eigene Objekt genauso verwendet werden, wie Sie das von den Standard-Methoden gewohnt sind:

alert('o = '+o.x+','+o.y+','+o.z+'nQuersumme = '+o.Quersumme());

Was passiert, wenn das eigene Objekt vorher nicht initialisiert wurde? Probieren Sie mal:

var o = new Objekt();
alert('o = '+o.x+','+o.y+','+o.z+'nQuersumme = '+o.Quersumme());

Sie erhalten: Quersumme = NaN. "NaN" ist die Abkürzung für "not a number" - klar, denn was soll das sein: undefined + undefined + undefined ? Am besten, man legt so einen Bytesalat zur Seite unter einem eigenen Namen - etwa "NaN"
Für uns Programmierer hat das den Vorteil, dass wir uns leicht dagegen wappnen können, wenn der Anwender nicht alle Werte initialisiert hat, die für eine Verarbeitung gebraucht werden. Dazu gibt es die Standard-Methode isNaN(). Mit dieser Abfrage kann leicht die Notbremse gezogen werden:

var o = new Objekt(1,2);
if(isNaN(o))
alert("'o' nicht vollständig initialisiert!");

Auch zu Standard-Objekten können eigene Methoden eingeführt werden. Nehmen wir zum Bespiel das String-Objekt und führen wir dazu etwa eine Methode Sperrung ein:

function Sperrung()
{
  for(st="", i=0; i < this.length; i++)
    st += this.charAt(i)+' ';
  return st;
}

In diesem Fall hat die Funktion Sperrung keine anderen Parameter - das Objekt, dem sie assoziiert ist, wird wieder mit this angesprochen. Soll eine ausgefeilte Methode programmiert werden, wäre es möglich, hier noch zusätzliche Parameter einzuführen.
Durch das Schlüsselwort prototype wird diese Funktion Sperrung zu einer Custom Method des Standard-Objekts String gemacht:

String.prototype.Sperrung = Sperrung;

Nun kann eine String-Variable genau wie mit einer Standard-Methode behandelt werden:

var s ="abcd";
alert('s = '+s+'ns.Sperrung() = '+s.Sperrung());

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Beispiel: JavaScript erweitern

Eigene Attribute einführen

Eigene Objekte einführen

Eigene Methoden einführen

Über uns

Cookie-Einstellungen