Dynamische Webseiten-Generierung, Vorlesung 7

<- Vorlesung 6 Übungen Vorlesung 8 ->


4) Objekte in JavaScript

Nachdem wir den Basis-Wortschatz von JavaScript kennengelernt haben, betrachten wir die objektorientierte Komponente von Javascript: Das Arbeiten mit eingebauten oder benutzerdefinierten Objekten. Objekte sind Elemente der Sprache, auf die wir - vereinfacht gesagt - mit Namen zugreifen können, die Eigenschaften eines Objektes können immer abgefragt werden, manchmal können Sie auch verändert werden.

Beispiel:
Ein wichtiges Objekt in JavaScript ist document, das Informationen über das HTML-Dokument, das gerade betrachtet wird, enthält. Man kann z.B. die Hintergrundfarbe des Dokumentes erfragen mit

	document.bgColor
oder wir können einen blauen Hintergrund erzeugen mit:
	document.bgColor = "#0000FF";
Ein Beipiel für eine Funktion, die speziell für das Objekt document existiert, ist die Funktion write:
	document.write("Hallo");
schreibt an der Stelle, an der dieser Befehl steht, den Text hallo. Interessant ist auch die Eigenschaft
	document.lastModified;
die angibt, wann das Objekt das letzte Mal verändert wurde. lastModified ist ein Beispiel für eine Eigenschaft, die von JavaScript zwar abgefragt, aber - sinnvollerweise - nicht verändert werden kann.

Beispiel:
Ein weiteres Beispiel für Objekte ist das Objekt navigator. Diese Objekt hat folgende wichtige Eigenschaften, die abgefragt werden können:

Diese Information könnte z.B. folgendermaßen abgefragt werden:
	document.write("Sie verwenden den Browser " + navigator.appName);
	document.write("<BR>Version ist" + navigator.appVersion);
Beispiel
Ein Unterobjekt des Objektes document ist eine Liste der Verweise, die das Dokument enthält. Diese Liste heißt links. Die Anzahl der Verweise auf einer Seite erhalten wir mit
	document.links.length;
Die Verweise selbst können wir mit
	document.links[0];
	document.links[1];
	...
	document.links[document.links.length-1];
erfragen. Genauso gibt es eine Liste namens images, die die Verweise auf Bilder in einem Dokument enthält.

Diese Liste der Verweise in einem Dokument ist ein Beispiel für das Objekt Array. Mehr dazu im nächsten Abschnitt.


5) Arrays (Felder)

Über die elementaren Datentypen Zeichenkette und Zahl hinaus, können wir auf ein Objekt Array zurückgreifen. Dies ist eine Liste von Daten, auf die wir zugreifen können, indem wir die Nummer des entsprechenden Elementes angeben. Wollen wir z.B. das erste Element in der Liste liste ausgeben, so müssen wir den Befehl liste[0] verwenden. Genau wie bei Java und C beginnt die Zählung bei 0. Die Anzahl der Elemente in einem Array liste ist mit liste.length erhältlich. Wenn wir also alle Listenelemente im Feld liste durchlaufen wollen, gehen wir folgendermaßen vor:

	for (i=0;i<liste.length;i++) {
		document.write(liste[i] + "<BR>");
	}
Genauso wie auf images und links, können wir auch auf Formulare (forms) in einem Dokument zugreifen. Zum Beispiel greifen wir mit
	document.forms[0]
auf das erste Formular in einer HTML-Seite zu. Jedes Formular enthält als Unterobjekt ein Array der Eingabefelder. Eingabefelder wiederum haben eine Eigenschaft value. Wollen wir z.B. die Eingabe aller Felder im ersten Formular einer HTML-Seite ausgeben, so könnte dies so aussehen.
	for (i=0;i<document.forms[0].elements.length;i++) {
		document.write(document.forms[0].elements[i].value + "<BR>");
	}


6) Weitere Zugriffsmöglichkeiten

Auf die Array-Unterobjekte eines Dokuments kann auch noch mit dem Namen des jeweiligen Objektes zugegriffen werden. Wir definierenein Formular mit dem Namen meinformular:

	<FORM NAME="meinfomular">
		<INPUT NAME="eingabe1">
		...
	</FORM>
Nun können wir mit dem Namen daraus zugreifen:
	document.meinformular.elements.length
	document.meinformular.eingabe1.value
Es gibt noch eine weitere Möglichkeit, nämlich:
	document.forms["meinformular"].elements.length
	document.forms["meinformular"].elements["eingabe1"].value
Diese eiden letzten Möglichkeiten beugen Programmierfehlern vor, die entstehen, wenn in der HTML-Seite die Reihenfolge der Formulare oder Eingabefelder verändert wird.

7) Wir bauen ein eigenes Array

Wenn wir ein eigenes Array benötigen, so muß dieses Array zuerst erzeugt werden:

	var a = new Array();
Danach können wir in dieses Feld hineinschreiben:
	for (i=0;i<100;i++) a[i] = i*i;
Wir könnten aber auch ein Array bei der Erzeugung gleich vorbelegen:
	var a = new Array(1,2,4,9,16);
Diese Befehle sind charakteristisch für objektorientierte Programmierung: Mit new wird ein neues Objekt erzeugt.
	new Array()
bedeutet genauer gesagt, es wird ein neues Objekt vom Type Array erzeugt. Um dies zu erreichen, wird die Methode Array() des Objektes Array aufgerufen. D.h. jedes Objekt hat üblicherweise eine Methode mit dem gleichen Namen wie das Objekt selbst - den sogenannten Konstruktor. Durch Aufruf dieses Konstruktors wird ein neues Objekt von diesem Typ erzeugt. Die Programmierer sagen, es wird eine neue Instanz dieses Objekts generiert.

8) Das window-Objekt

window ist das Objekt, das der Browser verwendet, um Inhalte anzuzeigen. Zum Beispiel öffnet der folgende Befehl ein neues Fenster mit dem entsprechenden URL:

	function neuesFenster() {
		window.open("http://did.mat.uni-bayreuth.de");
	}
Man kann dem neuen Fenster auch einen Namen geben, um später (mit anderen JavaScript-Befehlen) darauf zugreifen zu können:
	function neuesFenster() {
		window.open("http://did.mat.uni-bayreuth.de","meinNeuesFenster");
	}
Dazu gibt es eine Menge zusätzlicher Optionen, die in einer Zeichenkette übergeben werden können:
	function neuesFenster() {
		window.open("http://did.mat.uni-bayreuth.de","meinNeuesFenster",
		"width=200,height=300");
	}
Weitere in allen Browsern verfügbare Optionen sind: Bei Angabe von mehreren Optionen werden diese jeweils mit einem Komma voneinander getrennt; ein Leerzeichen soll nicht verwendet werden. Wenn keine Option angegeben wird, werden alle Schalter standardmäßig auf "wahr" gesetzt. Wenn mindestens eine Option angegeben wird, werden alle nicht angegebenen Optionen auf "falsch" gesetzt. Zulässige Werte für die Schalter sind "yes" oder "1" für wahr oder "no" oder "0" für falsch. Wenn ein Schalter ohne Wert angegeben wird, dann wird "wahr" angenommen. Ein gültiger Aufruf ist z.B.
	fenster=window.open("", "test", "menubar,width=300,height=300");
Dieser Befehl öffnet ein neues Fenster ohne URL. Wir können jetzt mit JavaScript-Befehlen in dieses Fenster schreiben. Das window-Objekt Fenster hat ein Unterobjekt document, für das der write Befehl zur Verfügung steht. Bevor wir allerdings in dieses Fenster schreiben können, müssen wir das Dokument öffnen - ähnlich wie beim Schreiben in eine Datei. Nach dem Schreiben müssen wir diesen "Schreib-Kanal" wieder schließen.
	fenster=window.open("", "test", "menubar,width=300,height=300");
	fenster.document.open();
	fenster.document.write("Hier ist eine HTML-Meldung");
	fenster.document.close();
Für derartige selbstgebaute Meldungsfenster ist es meist recht hübsch, wenn sie einen OK-Button enthalten, mit dem das Fenster wieder geschlossen werden kann. In HTML könnte dieser Button etwa so aussehen:
	<FORM>
	<INPUT TYPE="button" VALUE="OK" onClick="window.close()"> 
	</FORM>
Um dies in unser selbsterzeugtes Fenster zu schreiben, müssen wir so vorgehen:
	fenster=window.open("", "test", "menubar,width=300,height=300");
	fenster.document.open();
	fenster.document.write("Hier ist eine HTML-Meldung");
	fenster.document.write("<FORM>");
	fenster.document.write("<INPUT TYPE=\"button\" VALUE=\"OK\" onClick=\"window.close()\">"); 
	fenster.document.write("</FORM>");
	fenster.document.close();
Hier tritt ein kleines Problem auf: Wir wollen den String
	<INPUT TYPE="button"...
mit dem write-Befehl an die HTML-Seite schicken. Der Befehl
	fenster.document.write("<INPUT TYPE="button" ..."); 
funktioniert aber nicht, da JavaScript vermutet, daß die Zeichenkette nach TYPE= beendet ist. Wir benötigen daher zwei Arten von Anführungszeichen: Anführungszeichen für Javascript undAnführungszeichen für den HTML-Text, den wir gerade schreiben. mit dem können wir dies erreichen: \" wird von JavaScript nicht als Anführungszeichen ausgewertet, sondern es wird das Zeichen " an die HTML-Seite weitergeleitet. Man nennt dies Maskieren von Sonderzeichen

Im obigen Beispiel ist es etwas mühsam, immer fenster.document.write... zu tippen. Dies kann man mit dem with-Befehl abkürzen:

	fenster=window.open("", "test", "menubar,width=300,height=300");
	with (fenster.document) {
		open();
		write("Hier ist eine HTML-Meldung");
		write("<FORM>");
		write("<INPUT TYPE=\"button\" VALUE=\"OK\" onClick=\"window.close()\">"); 
		write("</FORM>");
		close();
	}
Dann wird zuerst getestet, ob ein Befehl eine Methode des angegebenen Objektes ist.


9) Das Math-Objekt

Neben den elementaren Arithmetik-Operationen wie Addieren etc. gibt es auch weitere Rechenfunktionen. Diese sind im Objekt Math zusammengefasst:

Methoden: will man den natürlichen Logarithmus der Zahl 10 berechnen, so lautet der Befehl:
	Math.log(10);
Mehrere Operationen fasst man üblicherweise wieder mit dem with-Befehl zusammen.


<- Vorlesung 6 Übungen Vorlesung 8 ->

Alfred.Wassermann@uni-bayreuth.de