[Beschreibung] [Quelltext] [Erläuterung] [Referenz]

Telefonbuch

Sortiere nach

Vorname Nachname Telefon
rückwärts

neuer Eintrag

Vorname :Nachname :Telefon :

Beschreibung

Es wird ein Telefonbuch angezeigt. Dies ist nach verschiedenen Kriterien sortierbar. Neue Einträge können hinzugefügt werden.

Quelltext


<head>
<script language="JavaScript">
<!--
  function ent(vnam, nnam, tele) {
    this.vnam=vnam;
    this.nnam=nnam;
    this.tele=tele;
    this.toString=tos;
  }

  order="";
  function tos() {
    if(order == "vnam") {
      return this.vnam;
    } else {
      return this.nnam;
    }
  }

  function show() {
    var win=window.open("","telefonbuch", 
      "width=300,height=300,scrollbars=yes");
    win.focus();
    if(document.form1.ord[0].checked) {
      order="vnam";
      arr.sort();
    } else if(document.form1.ord[1].checked) {
      order="nnam";
      arr.sort();
    } else if(document.form1.ord[2].checked) {
      arr.sort(cmpnum);
    }
    if(document.form1.rev.checked)arr.reverse();
    win.document.open();
    win.document.write("<title>Telefonbuch</title>");
    win.document.write("<center>");
    win.document.write("<table border>");
    for(ii=0; ii<arr.length; ii++) {
      win.document.write("<tr><td>"+arr[ii].vnam+
        "<td>"+arr[ii].nnam+
        "<td align=right>"+arr[ii].tele+"<br>");
    }
    win.document.write("</table>");
    win.document.write("<p>");
    win.document.write("<form><input type=button value='OK' "+
      "onClick='self.close()'></form>");
    win.document.write("</center>");
    win.document.close();
  }

  function add() {
    var tele=parseInt(document.form1.tele.value);
    if(isNaN(tele)) {
      alert("unzulaessige Telefonnummer");
      return;
    }
    if(document.form1.nnam.value == "") {
      alert("unzulaessiger Nachname");
      return;
    }
    arr[arr.length]=new ent(document.form1.vnam.value, 
      document.form1.nnam.value, tele);
    show();
  }

  function cmpnum(inp1, inp2) {
    return inp1.tele-inp2.tele;
  }

  function init() {
    arr=new Array();
    arr[0]=new ent("Frodo", "Baggins", 1001);
    arr[1]=new ent("Peregrin", "Took", 1007);
    arr[2]=new ent("Meriodoc", "Brandybuck", 1010);
    arr[3]=new ent("Samwise", "Gamgee", 999)
  }

//-->
</script>
</head>

<body onLoad="init();">
<form name=form1>
<h4>Sortiere nach</h4>
<input type=radio name="ord" value="vnam"> Vorname
<input type=radio name="ord" value="nnam" checked> Nachname
<input type=radio name="ord" value="tele"> Telefon
<br>
<input type=checkbox name="rev"> rückwärts
<br>
<input type=button value="Sort" onClick="show();">
<h4>neuer Eintrag</h4>
<table><tr><td>Vorname :<td>Nachname :<td>Telefon :<tr>
<td><input type=text name="vnam" size=20>
<td><input type=text name="nnam" size=20>
<td><input type=text name="tele" size=10>
</table>
<input type=button value="Add" onClick="add();">
</form>
</body>

Erläuterung

Für die einzelnen Einträge des Telefonbuchs wird ein eigener Objekt-Typ definiert. Hierzu dient die "constructur function" ent. Das damit erzeugte Objekte hat die Eigenschaften vnam, nnam und tele (Vorname, Nachname, Telefonnummer) und legt zudem die Methode toString fest: diese weist auf die function tos. Die function tos liefert in Abhängigkeit vom Schalter order entweder den Vornamen oder den Nachnamen als Ergebnis.
Die einzelnen Einträge ent werden in dem Feld arr abgelegt; zum Sortieren wird die Array-Methode sort verwendet.
Bei einer alphabetischen Sortierung (nach Vor- oder Nachname) verwendet sort standardmäßig die toString-Methode der im Feld enthaltenen Objekte; diese haben wir ja als function tos definiert.
Für die numerische Sortierung (nach Telefonnummer) wird an sort die selbstdefinierte Vergleichsfunktion cmpnum übergeben.


Referenz

[
Array] [sortieren] [Neu in V 1.2]

Array (Feld)

In einem Feld können z.B. numerische Werte, Zeichenketten aber auch wiederum Objekte gespeichert werden. Insbesondere können die einzelnen Elemente wiederum Arrays sein, um auf diese Weise mehrdimensionale Arrays zu erzeugen.
Um ein Feld zu erzeugen gibt es folgende Alternativen:
 arr1 = new Array();
 arr2 = new Array(zahl);
 arr3 = new Array(elem0, elem1, ... elemn);
Im ersten Beispiel wird ein zunächst leeres Feld (mit 0 Elementen) erzeugt.
Im dritten Beispiel wird ein Feld mit n Elementen erzeugt, die mit den als Parameter übergebenen Elementen elem0 bis elem1 gefüllt sind.
In JavaScript Version 1.1 wird im zweiten Beispiel ein Feld mit zahl Elementen erzeugt, diese Elemente sind zunächst leer.
Wenn im <script>-tag angegeben wird language="JavaScript1.2", (Version 1.2) dann wird hingegen ein Feld mit einem Element, das den Wert zahl enthält, erzeugt.

Um auf die Elemente eines Feldes zuzugreifen kann entweder ein numerischer Index oder eine Zeichenkette als Index verwendet werden. Zum Beispiel :

numerischer Index

 arr=new Array();
 arr[0]="Laura";
 arr[1]="Birgit";
 arr[2]="Uwe";
 for(ii=0; ii<arr.length; ii++) {
   document.write(ii+" = "+arr[ii]+"<br>");
 }

Zeichenkette als Index

 arr=new Array();
 arr["Laura"]=4;
 arr["Birgit"]="verrat ich nicht";
 arr["Uwe"]=41;
 document.write("Laura ist "+arr["Laura"]+ " Jahre alt<br>");
 document.write("Uwe   ist "+arr.Uwe     + " Jahre alt<br>");
 for (elm in arr) {
   document.write(elm+" = "+arr[elm]+"<br>);
 }
Die Eigenschaft length des erzeugten Arrays gibt die Anzahl der enthaltenen Elemente an. Die Zahl erhöht sich automatisch, wenn einem bisher nicht vorhandenen Feldelement ein Wert zugeweisen wird. Beispiel :
 arr=new Array("wert0", "wert1");
 arr[4]="wert4";
Zunächst wird ein Feld mit zwei Elementen (arr[0] und arr[1]) erzeugt; damit ist arr.length gleich 2. Mit der zweiten Anweisung wird dem bisher nicht vorhandenen Element arr[4] ein Wert zugewiesen. JavaScript erhöht damit automatisch arr.length auf 5; es entstehen darüber hinaus die Elemente arr[2] und arr[3] mit undefiniertem Inhalt.

Ein Array besitzt folgende Methoden :
sort([cmp]) Die Elemente des Arrays werden entsprechend der Werte der Elemente sortiert. Siehe unten.
reverse()Die Reihenfolge der Elemente wird umgekehrt.
join([sep])Die Werte aller Elemente des Arrays werden in Zeichenketten umgewandelt und zu einem String zusammengefügt. Dabei wird als Trennzeichen standardmäßig das Komma oder aber das explizit angegebene Zeichen sep verwendet.

Sortieren

Mit der Methode sort kann ein Array sortiert werden. Standardmäßig wird dabei von alle Elementen, die nicht sowieso Zeichenketten sind, die Darstellung als Zeichenketten (mittels der Methode toString) betrachtet und dann lexikalisch sortiert. Enthält das Feld z.B. die beiden numerischen Werte 99 und 100, dann werden diese als Zeichenketten "99" und "100" betrachtet; in der lexikalischen Sortierung kommt dann zuerst "100" und erst danach die "99". Wenn nun eine echte numerische Sortierung gewünscht wird, dann muß eine eigene Vergleichsfunktion definiert und als Parameter übergeben werden. Die Vergleichsroutine muß in der Lage sein, zwei als Eingabeparameter übergebene Elemente des Arrays zu vergleichen. Sie soll als Ergebnis liefern :
einen positiven Wert, wenn der zweite Eingabewert hinter dem ersten einsortiert werden soll,
0, wenn beide Eingabewerte gleichwertig sind,
einen negativen Wert, wenn der erste Eingabewert hinter dem zweiten einsortiert werden soll.
Für eine numerische Sortierung könnte ein Beispiel so aussehen :
 function compare(inp1, inp2) {
   return inp1-inp2;
 }

 arr=new Array(100, 99, 101, 98);
 arr.sort(compare);

 for(ii=0; ii<arr.length; ii++) {
   document.write(ii+" = "+arr[ii]+"<br>");
 }

Neu in Version 1.2

In V 1.2 gibt es folgende neue Methoden :
concat(arr2) arr3=arr1.concat(arr2)
erzeugt ein neues Array arr3, das sowohl die Elemente von arr1 als auch von arr2 enthält.
Zeichenketten und numerische Werte werden kopiert, Objekte werden referenziert.
V 1.2
pop()Liefert das derzeit letzte Element im Array und löscht dieses dann aus dem Array. V 1.2
push(elem0 [,elem1,...]) Hängt ein oder mehrere übergebene Elemente elem0, elem1, ... an das Array an und liefert als Ergebnis das zuletzt angehängte Element. V 1.2
shift()Liefert das derzeit erste Element im Array und löscht dieses dann aus dem Array. V 1.2
unshift(elem0 [,elem1,...]) Fügt ein oder mehrere übergebene Elemente elem0, elem1, ... am Anfang des Arrays ein und liefert als Ergebnis die neue Länge des Feldes. V 1.2
slice(von [,bis]) Liefert als Ergebnis ein neues Array, das die Elemente ab von bis exclusive bis des urspünglichen Feldes enthält. Wenn bis nicht angegeben wird, dann geht der Ausschnitt bis zum letzten Element; wenn bis negativ ist, dann wird es als relative Angabe zum Ende des Feldes verstanden. V 1.2
splice(von, anz [,elem0, elem1, ...]) Es werden vom Element von beginnend anz Elemente gelöscht und dafür die neuen Elemente elem0, elem1, ... eingefügt. Als Ergebnis wird ein Array der gelöschten Elemente zurückgegeben. Die Anzahl der neuen Elemente darf sich von der Anzahl der gelöschten Elemente unterscheiden. V 1.2

In V 1.2 gibt es eine neue Schreibweise ("literal notation"), um mit Elementen gefüllte Arrays zu initialisieren. Die beiden Zeilen

 arr = new Array(elem0, elem1, ..., elemn);
 arr = [elem0, elem1, ..., elemn];
sind gleichwertig.


Auf der nächsten Seite gibt es noch etwas Vermischtes von JavaScript Version 1.1

home
Erstellt von © Uwe Brinkmann - bingo e.V. - Stand 27.05.98