Dynamische Webseiten-Generierung, Vorlesung 10

<- Vorlesung 9


15) Vertiefung: Objekte und Arrays

Zum tieferen Verständnis betrachten wir nochmals Arrays anhand eines Beispiels, das an ein Beispiel in JavaScript für alle angelehnt ist.

Wir wollen eine Liste von Personen mit Namen und Vornamen anzeigen. Auf Knopfdruck soll diese Liste unterschiedlich sortiert werden können. Die Liste speichern wir beim Laden der Seite in einem array, jedes array-Element ist ein eigenes Objekt, bestehend aus Namen und Vornamen.

function init() {
	liste = new Array();
	liste[0]=new eintrag("Schröder","Gerhard");	
	liste[1]=new eintrag("Kohl","Helmut");
...
}
eintrag ist dabei ein neues Objekt, das zuvor folgendermaßen definiert wird:
	function eintrag(name, vorname) {
		this.name = name;
		this.vorname = vorname;
		this.toString=tos;
	}
Ein Objekt eintrag besteht aus 2 Strings (name und vorname) und einer Method toString, die aus den beiden Strings, je nach angegebener Sortierung, einen String erzeugt. tos könnte also etwa so aussehen:
	order="":

	function tos() {
		if(order == "vorname") {
			return this.vorname + " " + this.name;
		} else {
			return this.name + ", " + this.vorname;
		}
	}
array-Objekte enthalten standardmäßig eine Sortierfunktion. Wir können also angeben:
	liste.sort();
Diese Funktion sortiert die Objekte, die im Array liste enthalten sind. sort sortiert die Objekte lexikographisch nach dem String, der von der Methode toString erzeugt wird.

Wollen wir die Reihenfolge des sortierten Arrays umkehren, so verwenden wir die Array-Methode reverse(). Ist das Array dann sortiert, wird es in einem neuen Fenster angezeigt:

	function eintrag(name, vorname) {
		this.name = name;
		this.vorname = vorname;
		this.toString=tos;
	}
	order="":

	function tos() {
		if(order == "vorname") {
			return this.vorname + " " + this.name;
		} else {
			return this.name + ", " + this.vorname;
		}
	}
	
	function init() {
		liste = new Array();
		liste[0]=new eintrag("Schröder","Gerhard");	
		liste[1]=new eintrag("Kohl","Helmut");
...
	}

	function show() {
		
		var win=window.open("","Namensliste", 
			  "width=300,height=300,scrollbars=yes");
		win.focus();
		win.document.open();
		
		for(ii=0; ii<liste.length; ii++) {
			  win.document.write(liste[ii].toString()+"
"); } win.document.write("<p>"); win.document.write("<form><input type=button value='OK' "+ "onClick='self.close()'></form>"); win.document.close(); } function vorwaerts() { liste.sort(); show(); } function rueckwaerts() { liste.sort(); liste.reverse(); show(); } </script> </head> <body onLoad="init();"> <FORM NAME="sort"> <INPUT TYPE="BUTTON" VALUE="Sortiere nach Name" onClick="order='name';vorwaerts();"> <INPUT TYPE="BUTTON" VALUE="Sortiere nach Vorname" onClick="order='vorname';vorwaerts();"> <INPUT TYPE="BUTTON" VALUE="Rückwärts" onClick="rueckwaerts();"> </FORM>


16) Cookies in JavaScript

Auch mit JavaScript besteht die Möglichkeit, Cookies zu schreiben und zu lesen. Das Objekt document enthält die Eigenschaft cookie. Diese muß allerdings in einem bestimmten Format beschrieben werden.

document.cookie ist ein String, der aus einem oder mehreren, durch Strichpunkte getrennte Teilstrings besteht. Jeder Teilstring gibt eine Eigenschaft des Cookies an. Dies können sein:

Die Bedeutung ist also genauso, wie im PHP-Teil der Vorlesung erläutert. Ein Beispiel


  ANZAHLTAGE=7;
  function set_cookie(name, value) {
    document.cookie=name+"="+escape(value)+"; expires="+cookie_tage();
  }

  function cookie_tage() {
    var date=new Date();
    date.setDate(date.getDate()+ANZAHLTAGE);
    var gmt=date.toGMTString();
    var k1=gmt.indexOf(" ");
    var k2=gmt.indexOf(" ", k1+1);
    var k3=gmt.indexOf(" ", k2+1);
    var str=gmt.substring(0,k2)+"-"+gmt.substring(k2+1,k3)+"-"+gmt.substring(k3+3,gmt.length);
    return str;
  }	
  
 
  function get_cookie(name) {
    var value=null;
    if(document.cookie != "") {
      var kk=document.cookie.indexOf(name+"=");
      if(kk >= 0) {
        kk=kk+name.length+1;
        var ll=document.cookie.indexOf(";", kk);
        if(ll < 0)ll=document.cookie.length;
        value=document.cookie.substring(kk, ll);
        value=unescape(value); 
      }
    }
    return value;
  } 
Auffallend sind hier zwei Dinge:

Das Verfallsdatum des Cookie muß im GMT-Format (Greenwich Mean Time) angegeben werden:

Monday, 19-Jul-99 16:59:59 GMT
Die Methode toGMTString() liefert jedoch dieses Format ohne die - Zeichen. Diese werden daher in unserer Funktion cookie_tage() nachträglich eingefügt. Außerdem darf die Jahreszahl nur zweistellig angegeben werden.

Außerdem verwenden wir die Funktionen escape() und unescape, die Sonderzeichen maskieren. Zum Beispiel wird durch escape() ein Leerzeichen als %20 angegeben. Dies ermöglicht, daß im Cookie auch ein Komma oder ein Gleichheitszeichen als Text angegeben werden kann.


17) Layer in Netscape

Mit der Layer-Technik (momentan noch auf Netscape beschränkt) können verschiedene Schichten in einem Dokument übereinandergelegt werden. Diese Schichten können beliebig verschoben werden.

Wir legen über das Text-Dokument nun 8 Schichten, die in unterschiedlichen Positionen angezeigt werden. Ein Beispiel (wiederum aus JavaScript für alle) findet man hier.


<- Vorlesung 9

Alfred.Wassermann@uni-bayreuth.de