Dynamische Webseiten-Generierung, Vorlesung 8

<- Vorlesung 7 Übungen Vorlesung 9 ->


10) Das Date-Objekt

Dieses Objekt wird verwendet um das Datums- und Uhrzeit-Berechnungen durchzuführen. Um eine derartige Berechnung ausführen zu können, müssen wir ein neues Date-Objekt erzeugen:
	var jetzt = new Date();
	document.write(jetzt.getTime());
Dies schreibt den momentanen Zeitpunkt in die Variable jetzt. Dies ist der Zeitpunkt, der auf der Uhr des Clients angezeigt wird. Die Methode getTime() gibt dann die Anzahl der Millisekunden an, die vom 1.1.1997 um 0 Uhr bis zu dem in jetzt gespeicherten Zeitpunkt verstrichen sind.

Man kann das neue Date-Objekt aber nicht nur mit dem momentanen Zeitpunkt erzeugen, sondern auch mit einem beliebigen anderen Zeitpunkt:

	dann = new Date(1999,11,24);
setzt z.B. die Variable dann auf Weihnachten 1999. Dies ist etwas gewöhnungsbedürftig: Die Monate werden von 0 an gezählt, d.h. 0=Januar,1=Februar,...

Das Format lautet also:

	variable = new Date(Jahr, Monat, Tag);
Noch genauer kann der Zeitpunkt mit
	variable = new Date(Jahr, Monat, Tag, Stunden, Minuten, Sekunden);
eingestellt werden. Auch hier wird mit 0 bei den Monaten zu zählen begonnen.

Nun kann man rechnen

	var jetzt = new Date();
	var dann = new Date(1999,11,24);
	var d = (dann.getTime() - jetzt.getTime())/1000;
	document.write("Bis Weihnachten haben wir noch "+d+" Sekunden");
Man kann auch individuelle Information abrufen:

getTime()Zeit in Millisekunden seit dem 1.1.19970
getDate()Monatstag ermitteln
getDay()Wochentag ermitteln
getHours()Stunde ermitteln
getMinutes()Minute ermitteln
getMonth()Monat ermitteln
getYear()Jahr ermitteln

Der Zeitpunkt eines Date-Objekts kann auch neu gesetzt werden:

setTime()Zeit mit Millisekunden besetzen
setDate()Monatstag setzen
setDay()Wochentag setzen
setHours()Stunden setzen
setMinutes()Minuten setzen
setMonth()Monat setzen
setYear()Jahr setzen

Achtung: Hier kann es zu einer Art Jahr2000-Fehler kommen:

	var zeit = new Date();
	var y = zeit.getYear();
Daraufhin enthält y den Wert 99. Will man den Wert des Jahres um 1 erhöhen:
	zeit.setYear(y+1);
so wird als Jahreszahl statt 2000 die Zahl 100 gesetzt! Abhilfe vorher evtl. die Variable y um 1900 erhöhen.


11) Event-Handling

Im Unterschied zu konventioneller Programmierung ohne graphischer Benutzeroberfläche, wird auch bei JavaScript mit sogenanntem Event-Handling gearbeitet.

Klickt der Benutzer z.B. auf einen Button, so bekommt JavaScript die Meldung, daß das Ereignis "Klick auf Button" eingetreten. JavaScript ermittelt, welcher Button geklickt wurde, und falls für diesen Button vom Benutzer eine individuelle Reaktion vorgesehen wurde, wird diese ausgeführt.

Ein Beispiel:

 <FORM>
 <INPUT TYPE=button VALUE="Klick" onClick="alert('Hallo');">
 </FORM>
Folgende Standard-Ereignisse kennt JavaScript, allerdings sind nicht alle Ereignisse für jedes graphische Objekt relevant. Außerdem kennt nicht jede Version jedes Browsers all diese Ereignisse, bzw. es gibt evtl. weitere Ereignisse.

EventBeschreibungTags
onAbortAnwender drückt auf STOP, bevor alle Bilder geladen wurden.IMG
onBlurElement verliert den Fokus hauptsächlich BODY, INPUT, SELECT, TEXTAREA
onChangeBenutzer verändert Eintrag INPUT, SELECT, TEXTAREA
onClickBenutzer klickt auf Element hauptsächlich BUTTON, aber viele weitere
onFocusElement erhält Focus, siehe onBlur 
onLoadTritt ein, nachdem eine HTML-Datei vollständig geladen wurde. BODY, FRAMESET
onMouseovertritt ein, wenn die Maus über das Element geführt wird ursprünglich A, AREA, mittlerweile sehr viele andere Elemente
onResetBeim Auslösen des Reset-Befehls in einem FormularFORM
onSelecttritt ein, wenn der Benutzer Text selektiert INPUT, TEXTAREA
onSubmittritt ein, wenn ein Formular abgeschickt wird FORM
onUnloadtritt ein, wenn eine HTML-Datei verlassen wird BODY, FRAMESET

Ein Beispiel:

Man definiert zwei Funktionen start und ende.

	var s,e;
	function start() {
		s = new Date();
	}
	function ende() {
		e = new Date();
		var d = (e.getTime() - s.getTime())/1000;
		alert("Sie waren "+d+" Sekunden bei mir!");
	}
Diese Funktionen werden im BODY-Tag nach dem Laden der Seite, bzw. beim Verlassen der Seite aufgerufen.
	<BODY onLoad="start();" onUnload="ende();" >

Beispiel:

Falls der Benutzer mit der Maus über einen Verweis fährt, wird in der Statuszeile ein entsprechender Text angezeigt:

	<A HREF="xxx.htm" onMouseover="status='Klick mich';">Verweis</A>
Man kann mit diesen Event-Handlern die Funktionsweise von HTML-Objekten an seine Bedürfnisse anpassen. Dazu muß man JavaScript mitteilen, ob die ursprünglich vorgesehene Aktion noch ausgeführt werden soll. Nochmal das obige Beispiel:
	<A HREF="xxx.htm" onClick="alert('Klick mich');">Verweis</A>
Beim Klicken auf den Verweis wird ein Meldungsfenster gezeigt, und danach auf die Seite xxx.html gesprungen. Wenn man nur das Meldungsfenster angezeigt haben will, so muß man zusätzlich return false an JavaScript zurückgeben:
	<A HREF="xxx.htm" onClick="alert('Klick mich');return false;">Verweis</A>
Dadurch wird verhindert, daß der Link verfolgt wird.

Ein deutlicheres Beispiel dazu ist onSubmit. Wir können z.B. nochmals nachfragen, ob ein Formular wirklich abgeschickt werden soll.

	<FORM ...  onSubmit="return confirm('wirklich abschicken?'">
	...
	</FORM>
confirm() erzeugt wie alert ein Meldungsfenster. Zusätzlich wird true oder false zurückgegeben, je nachdem ob auf OK oder Abbruch geklickt wird.


<- Vorlesung 7 Übungen Vorlesung 9 ->

Alfred.Wassermann@uni-bayreuth.de