Javascript

Objekte in Javascript

Ein Objekt enthält Schlüssel-Werte Paare. Über die Schlüssel kann auf die Werte lesend und schreibend zugegriffen werden.
Ein Objekt kann in unterschiedlichen Formen erzeugt werden.

Objekt-Literal-Schreibweise
Konstruktorfunktion (wird später erklärt)
Object.create() (wird später erklärt)

Hier wird zunächst nur die Literal-Schreibweise betrachtet.
Inhalt eines Objektes sind Eigenschaften und Methoden.

line: code : Objekt-Literal-Schreibweise

`1:`	`var person = { anrede: 'Herr', name: 'Hinterwaldhuber', vorname: 'Waldemar', vor_wahl: '06342', 'tel-nr': ' 32791', anrufen: function(){ show('Hallo '+this['tel-nr']); } };`

Definieren der Eigenschaften

Eingenschaftsnamen bestehen aus Buchstaben, _ (underscore) und Ziffern gefolgt von einem Doppelpunkt
Das erste Zeichen ist ein Buchstabe
Der Name wird nicht gequotet, es sei denn, er enthält einen Bindestrich (Sonderfall) z.B. span class="red" tel-nr'; '32791',
Ein Name mit einem Bindestrich muß gequotet werden, da der Bindestrich von Javascript sonst als Minus ausgewertet wird.

Zugriff auf Eigenschaften eines Objekts

Der Zugriff erfolgt entweder über die Punktschreibweise oder über die []-Notation.
Die Punktschreibweise funktioniert nur für Eigenschaften mit gültigem Variablennamen. Z.B. person.name person.vor_wahl
Für das Arbeiten mit Eigenschaften, die keinen gültigen Namen haben, beispielsweise solche mit einem Bindestrich,
müssen Sie die []-Notation verwenden. Hier z.B. person['tel-nr']
Dabei wird der Eigenschaftsname als String zwischen [] angegeben.
Ohne die []-Notation würde z.B. ein Bindestrich als Minuszeichen interpretiert werden.
Natürlich können Sie auch normale Eigenschaftsnamen in []-Notation angeben.
Hier z.B. person['vorname']

line: code : Objekt Zugriff in Punktschreibweise

`1:`	`// Zugriff auf das Objekt (auf die Eigenschaften) show(person.anrede+' '+ person['vorname']+' '+ person.name +' '+person.vorwahl+ ' '+person['tel-nr']); person.anrufen(); // Auf die Methode`

Arrays

Auch Arrays sind in Javascript Objekte. Sie können in 2 Arten deklariert werden:

Über eine Kunstruktorfunktion
line: code : Array-Kunstruktorfunktion
1:
var auto_ger = new Array(); auto_ger[0]="Mercedes"; auto_ger[1]="BMW"; auto_ger[2]="Audi"; auto_ger[3]="VW";
hier wurde jedes einzelne Tabellenelement mit Angabe seines Index deklariert
line: code : Array-Kunstruktorfunktion
1:
var auto_eu = new Array("Jaguar","Mini", "Rover","Volvo");
hier wurden alle Elemente der Tabelle direkt angegeben

Beide Formen erzeugen eine Tabelle mit jeweils 4 Elementen.
Über eine Literalschreibweise
line: code : Array-Kunstruktorfunktion
1:
var auto_ost =[ "Toyota", "Honda", "Nissan"," " ];
Diese Form ist ab ECMAScript 6 für alle Mainbrowser ausser IE11 verfügbar.

Mit der Angabe eines Index kann auf den Inhalt eines Tabellen Elementes zugegriffen werden.
Alle Tabellenformen haben die Eigenschaft length, die die aktuelle Länge der Tabelle enthält. Diese kann auch verwendet werden, um auf das letzte Element zuzugreifen oder die Tabelle zu verlängern.

line: code : Array-Kunstruktorfunktion

1:

 
// Zugriff auf auf die Eigenschaft  length
function run_tablength(){
    show('auto_ger[3]  : ' +auto_ger[3]);
    show('Tabellenlänge  auto_ger : '+auto_ger.length);
    show('Tabellenlänge  auto_eu  : '+auto_eu.length);
    show('Tabellenlänge  auto_ost : '+auto_ost.length); 
    show(auto_ger[auto_ger.length-1]);  // Achtung -1 hier erforderlich
    auto_ger[auto_ger.length]='Ford';   // Hänge  neues Element an
    show('Tabellenlänge auto_ger : '+auto_ger.length);  // neue Länge
    show('Letztes Element  : '+auto_ger[auto_ger.length-1]);
}

Alle Tabellen haben folgende Methoden :

Methode	Beschreibung
toString()	Gibt die Tabelle als String aus.
push()	Fügt das übergebene Element an das Ende des Arrays an. Syntax : arr.push(element1 [, ... [, elementN]]) Returnwert: neue Länge Da push() eine generische Methode ist kann sie auch auf Objekt angewendet werden.
pop()	Entfernt das letzte Element des Arrays. Syntax : arr.pop() Returnwert: das entfernte Element.
shift()	Entfernt das erste Element des Arrays. Gibt das entfernte Element zurück
forEach()	Wendet eine übergebene Funktion auf jedes Element des Arrays an
slice()	Schneidet Elemente aus dem Arrays heraus Syntax : arr.slice([begin[, end]]) Rückgabe , der ausgeschnittene Teil Originaltabelle wird nicht verändert.
splice()	fügt neue Elemente in das Arrays ein
concat()	Hängt Elemente oder Arrays an das Arrays an.
sort()	Sortiert das Arrays. Dabei muss eine Vergleichsfunktion übergeben werden
reverse()	Kehrt die Reihenfolge der augenblicklichen Sortierung um.
filter()	Filtert Elemente aus dem Array. Dazu muss eine Funktion mit dem Filterkriterium übergeben werden
map()	Bildet die Elemente auf der Basis einer übergebenen Funktion auf neue Elemente ab
join()	Wandelt ein Arry in eine Zeichenkette um
reduce()	Faßt die Elemente aus dem Arrays auf der Basis einer übergebenen Funktion zusammen.

Weitere Methoden finden Sie in der Dokumentation Array bei mozilla.org

Mit die einfachste Methode ist push(). Damit wird ein neues Element an die Tabelle angehängt.
Sie kann an Stelle von arrayName[arayName.length]="Neues Eleḿent" verwendet werden.
Mit Hilfe der Methode pop() wird das letzet Element aus dem Array entfernt.

line: code : Array Methoden push() und pop()

1:

   show('Tabelle als String  : '+auto_eu.toString());
   show('Tabellenlänge  auto_eu  : '+auto_eu.length);
   auto_eu.push('Renault');
   auto_eu.push('Skoda');
   show('Tabellenlänge  auto_eu  : '+auto_eu.length+'  '+auto_eu.toString());
   show('Letztes Element  : '+auto_eu[auto_eu.length-1]);
   auto_eu.pop();       // kein Parameter
   show('Nach pop() Länge auto_eu : '+auto_eu.length+'  '+auto_eu.toString());
   show('Letztes Element  : '+auto_eu[auto_eu.length-1]);
   show('Erstes Element  : '+auto_eu[0]);
   var elem_1=auto_eu.shift();             // kein Parameter
   show('Rückgabe von shift  : '+elem_1);  // entfentes Element ausgeben
   show('erstes Element jetzt : '+auto_eu[0]);
   show('Tabellenlänge  auto_eu  : '+auto_eu.length+'  '+auto_eu.toString());
   show('Ausgabe der gesamten Tabelle');
   auto_eu.forEach(function(curr_element, index){
            show('  '+index+'  '+curr_element); }
   );
   show(auto_eu.toString());

Zeile 1: Gibt die Tabelle als String aus. Die Elemente sind durch Komma getrennt.
Zeile 2: Gibt die aktuelle Tabellenlänge vo auto_eu aus
Zeile 3: Fügt ein neues Element hinzu
Zeile 4: Fügt ein weiteres Element hinzu
Zeile 5: Zeigt die jetzt aktuelle Tabellenlänge. Sie muss um 2 grösser sein als in Zeile 2
Zeile 6: Zeigt das letzte Tabelenelement mit Hilfe der Eigenschaft length . Beachten Sie die -1
Zeile 7: Entfernt das letzte Element. Damit veringert sich auch die Tabellenlänge
Zeile 8: hier wird die veringerte Tabellenlänge angezeigt.
Zeile 9: Zeigt das jetzt letzte Element
Zeile 10: Zeigt das erste Tabellenelement, bevor das Element entfernt wird. Zeile 11: Entfernt das erste Element, liefert aber den Inhalt zurück. Dieser wird ein der Variablen gespeichert.
Zeile 12: Die Rückgabe wird angezeigt
Zeile 13: Auch die Tabellenlänge wurde durch shift() verringert. Das wird hier angezeigt.
Zeile 14: Ausgabe einer Überschrift.
Zeile 15: Die Tabelle wird mit der forEach-Methode abgearbeitet. Es wird eine anonyme Funktion verwendet.
Dieser wird automatisch das jeweilige Element als Parameter übergeben.
Innerhalb der anonymen Funktion kann mit dem Parameter weitergearbeitet werden.
Hier wird er benutzt, um die Tabelle Zeilenweise auszugeben

Tabelle Concatination

line: code : Array Methoden concat(), slice und splice()

1:

   show ('Methoden concat(), slice und splice()'),
   show('auto_ger   : '+auto_ger.toString());
   show('auto_eu    : '+auto_eu.toString());
   auto_all=auto_ger.concat(auto_eu);
   show('Neu erzeugte Tabelle auto_all  : '+auto_all.toString());
   tmp=auto_all.slice(3,5);
   show(' tmp  : '+tmp.toString());
   tmp=auto_all.slice(5);
   show(' tmp  : '+tmp.toString());
   auto_all.splice(3,0,auto_ost[2], auto_ost[4]);
   show('geänderte Tabelle auto_all  : '+auto_all.toString());
   auto_all.splice(1,0,auto_ost[1]);
   show_tab(auto_all);

Zeigt den augenblicklichen Stand der Tabelle auto_ger
Zeigt den augenblicklichen Stand der Tabelle auto_eu
erzeugt eine neue Tabelle auto_all, in der auto_ger und auto_eu zusammengefasst werden. auto_ger und auto_eu werden dabei nicht verändert.
Gibt die neue Tabelle aus.
Kopiert aus der Tabelle auto_all die Elemente 3 bis 5 (ausschliesslich), d.h nur [3] und [4] Die globale Tabelle tmp wird dabei überschrieben (war aber leer).
Hier wird bei slice nur der Startwert angegeben. tmp enthält damit alle Elemente ab auto_all[5]
Zeigt das Ergebnis. SLICE schneidet/kopiert also Scheiben (Elemente) aus der Tablle, wobei die Ursprungstabelle nicht verändert wird.

forEach

Eine forEach iteriert über die Tabelle und erwartet ein Callback dem bis zu 3 Parameter übergeben werden.

  arr.forEach(function callback(currentValue[, index[, array]]) {
        //your iterator
     }[, thisArg]);

currentValue ist das augenblickliche Tabellenelement
index (optional) Der Index für das Element (0 basiert)
array (optional) Das Array mit dem gearbeitet wird.
thisArg (optional) Value, das als this verwendet wird (die Reference zu Object) wenn der Callback ausgeführt wird.)

line: code : forEach mit Closure

`1:`	`show('iteration mit forEach'); auto_all=auto_ger.concat(auto_eu); auto_all.forEach(function(el,ind){ show('element='+el+' index='+ind ); });`