|
Funktionen aufrufen
über einen event handler
Tableau der event handler
Funktionen aufrufen über einen event handler
onClick in Verbindung mit dem radio button: der
china song
Ändern der Farbe des Textes
Pop up Fenster wenn sich eine Seite lädt
Pop up Fenster, wenn der User die Seite schliesst
| Funktionen
aufrufen über einen event handler |
|
JavaScript Code lässt sich nur über
Funktionen aufrufen. Sieht man von wenigen Ausnahmen ab, Aufruf
einer Funktion über href oder über eine Form, werden
diese Funktionen immer über event handler aufgerufen.
Man sollte zu den event handlern nun zwei Dinge wissen.
1) Welche gibt es
2) An welche html tags können sie gebunden werden
Bevor wir zu einer Detail Betrachtung übergehen, ein
paar Beispiele.
<html><head><title>event
handler</title>
<script language="JavaScript">
function reinschreiben()
{
document.banane.kirsche.value="Hallo mein Schatz";
}
</script>
</head>
<body>
<form name="banane">
<input type=text name="kirsche"><input
type=button value="click mich !" onClick="reinschreiben()">
</form>
</body>
</html>
Am besten ist, man vergegenwärtigt
sich erstmal, was dieser Skript macht, indem man hier
drauf clickt. Alles klar? Man clickt auf
den Knopf "click mich" und in der Text Box erscheint
"Hallo mein Schatz". Unser Thema im Moment sind
event handler. Wir erklären kurz diesen Skript und kommen
dann auf unser Thema zurück. Die Details lassen wir aber
erstmal unter den Tisch fallen. Mit document.banane.kirsche
steuern wir die die Textbox an. Das ist eigentlich nicht schwer
einzusehen. document ist das aktuelle Dokument, welches man
vor der Nase hat. In diesem Dokument gibt es eine form, die
hat den Namen banane, folglich kommen wir mit document.banane
bis zu dieser Form. Innerhalb der Form gibt es eine Textbox,
die hat den sinnreichen Namen kirsche, folglich wandert man
mit document.banane.kirsche zu dieser Box. Diese Box wiederum
hat viele Eigenschaften, aber unter anderem auch einen value,
einen Wert, also etwas, was in der Box steht. Mit document.banane.kirsche.value="Hallo
mein Schatz" weisen wir der Box einen Wert zu. Das alles
macht die Funktion reinschreiben(), die wiederum von dem event
handler onClick aufgerufen wird. Der event handler onClick
ist hier an den tag button gebunden. Dieser tag hat eigentlich
gar keine Funktion. Seine einzige Daseinsberechtigung ergibt
sich aus der Tatsache, dass er aussieht wie der submit tag
und dass ein JavaScript event handler an ihn gebunden werden
kann. Machen wir uns das mit den event handlern noch an einem
weiteren Beispiel klar, bevor wir anfangen, die ganze Angelegenheit
etwas systematischer zu durchleuchten.
Betrachten wir diesen Skript.
<html><head><title>OnClick</title>
</head>
<script language="javaScript">
function wegblend()
{
document.images[0].src="beispiele/hallo.gif";
}
function reinblend()
{
document.images[0].src="beispiele/sonne.gif";
}
</script>
<body>
<br><br><br>
<center>
<img src=sonne.gif onMouseOver="wegblend()";
onMouseOut="reinblend()";><br>
<font color=blue face=arial size=5>
</font><br>
</center>
</body>
</html>
Was er macht, kann man sich hier
klar machen, wenn man mit der Mause über das Bild fährt
(dieser Skript funktionniert nicht mit Netscape 4.x, da müsste
man es anders lösen).
Könnte nicht klarer sein oder ? Man fährt mit der Maus über
das Bild und das Bild ändert sich. Rien à faire. Obwohl es
nicht mit unserem Thema zu tun hat, den event handlern, müssen
wir kurz erklären, was dieser Skript eigentlich treibt. Wir
haben zwei neue even handler (wir haben jetzt also schon eine
ganze Menge davon) nämlich onmouseout() und onmouseover().
Diese binden wir an den img tag. Fahren wir also mit der Maus
in das Bild, rufen wir die Funktion reinblend auf und wenn
die Maus das Bild verläßt, die Funktion wegblend(). Was die
zwei Funktionen machen, ist dann im Prinzip das gleiche, wie
im ersten Beispiel. document ist das Dokument, welches Sie
im Moment vor der Nase haben. Der Zugriff auf die Bilder einer
Seite hat man mit dem Array (piano, piano, kommt alles noch,
wir sind aber im Moment bei den event handlern) images. Da
es das erste Bild ist, ist es images[0]. Die Bilder wiederum
haben eine Menge Eigenschaften, z.B. einen source code, src,
also den Pfad zu dem Bild. Diesen wiederum tauschen wir aus,
beispiele/hallo.gif, bzw. beispiele/sonne.gif. Das wars. Wir
haben also jetzt an live Beispielen schon einige event handler
kennen gelernt: onClick, onmouseover, onmouseout, onload.
Das sind, soit dit en passant, wohl auch die wichtigsten.
Hier haben wir das ganze Tableau. Die beschriebenen Verhältnisse
gelten für den Explorer und Netscape ab 6.0.
| Tableau
der event handler |
|
| event handler |
kann gebunden werden
an ... |
Bemerkungen |
| |
| onClick |
<input type=button value="XXX"
onClick=gehtlos()>
<input type=checkbox name=XXX
value="XXX" onClick=gehtlos()>
<input
type=radio name=XXX value="XXX" onClick=gehtlos()>
<input type=reset name=XXX value="XXX" onclick=gehtlos()>
<input type=submit name=XXX value="XXX" onClick=gehtlos()>
<input type=reset value="XXX" onClick=gehtlos()>
<A href=http://www.XXX.de onClick=gehtlos()>XXX</A> |
Clickt der User auf eines
dieser Elemente, wird die JavaScript Funktion gehtlos()
ausgeführt. Ist das Element ein Hyperlink, dann führt
der Browser zuerst onClick aus und dann den Hyperlink.
|
| |
| onLoad |
<frameset cols="XX
%,XX%" onLoad=gehtlos()>
<body onLoad=gehtlos()>
<img src=http://www.xxx.de/xxx.jpg onLoad=gehtlos()> |
Die Funktion gehtlos() wird
nach dem Laden aller Frames eines Framesets, nach dem
Laden des gesamten HTML Dokumentes oder nach dem Laden
des Bildes ausgeführt. |
| |
| onMouseOver |
<div onMouseOver=gehtlos()>XXX
<span onMouseOver=gehtlos()>XXX <img src=http://www.XXX.de/xxx.jpg
onMouseOver=gehtlos()>
<A href=http://www.XXX.de
onMouseOver=gehtlos()>XXX</A>
<AREA SHAPE=CIRCLE
COORDS="XX,XX,XX" OnMouseOver=gehtlos()>
|
Die Funktion gehtlos() wird
ausgeführt, wenn der Mauszeiger die wie auch immer
gestaltete, sensitive Fläche betritt |
| |
| onMouseOut |
<div onMouseOver=gehtlos()>XXX
<span onMouseOver=gehtlos()>XXX <img src=http://www.XXX.de/xxx.jpg
onMouseOver=gehtlos()>
<A href=http://www.XXX.de
onMouseOver=gehtlos()>XXX <AREA SHAPE=CIRCLE COORDS="XX,XX,XX"
OnMouseOver=gehtlos()> |
Die Funktion gehtlos() wird
ausgeführt, wenn der Mauszeiger die wie auch immer
gestaltete sensitive Fläche verlässt |
| |
| onUnload |
<form action=http://www.XXX.de
onSubmit=gehtlos()> |
Die Funktion gehtlos() wird
ausgeführt, wenn der User auf den submit Knopf des
Formulars schickt. Die Funktion wird dann tatsächlich
ausgeführt, wenn gehtlos() der Wert 1 (true) zurückgibt.
|
| |
| onReset |
<input type=reset value="XXX">
|
Die Funktion gehtlos() wird
ausgeführt, wenn der User auf den reset Knopf des
Formulars drückt. |
| |
| onSelect |
<textarea name=XXX rows=X
cols=X onSelect=gehtlos()> |
Die Funktion onSelect wird
ausgeführt, wenn der User einen Textbereich im textarea
Feld markiert. |
| |
| onAbort |
<img src=http://www.XXX.de/XXX.jpg
onAbort=gehtlos()> |
Die Funktion gehtlos() wird
ausgeführt, wenn der User das Laden eines Bildes
abricht |
| |
| onBlur |
<input type=button value="XXX"
onBlur=gehtlos()>
<input type=checkbox name=XXX
value="XXX" onBlur=gehtlos()>
<input
type=radio name=XXX value="XXX" onBlur=gehtlos()>
<input type=reset name=XXX value="XXX" onBlur=gehtlos()>
<input type=submit name=XXX value="XXX" onBlur=gehtlos()>
<input type=reset value="XXX" onBlur=gehtlos()>
<input type=file name="XXX" onBlur=gehtlos()>
<input type=password name="XXX" onBlur=gehtlos()>
<select name=XXX onBlur=gehtlos()>
<frameset
rows="XX,XX" onBlur=gehtlos()>
<textarea
rows=XX cols=XX onBlur=gehtlos()>
|
Die Funktion gehtlos() wird
ausgeführt, wenn eines der genannten Elemente verlassen
wird, also der Fokus auf irgendein anderes Element gesetzt
wird, bzw. irgendwo sonstwo geklickt wird. |
| |
| onChange |
<input type=file name="XXX"
onBlur=gehtlos()>
<select name=XXX onBlur=gehtlos()>
<input type=text name="XXX" onBlur=gehtlos()>
<textarea rows=XX cols=XX onBlur=gehtlos()>
|
Die Funktion gehtlos wird
ausgeführt, nachdem in einem der genannten Elemente
eine Änderung stattgefunden hat. |
| |
| onFocus |
<input type=button value="XXX"
onBlur=gehtlos()>
<input type=checkbox name=XXX
value="XXX" onBlur=gehtlos()>
<input
type=radio name=XXX value="XXX" onBlur=gehtlos()>
<input type=reset name=XXX value="XXX" onBlur=gehtlos()>
<input type=submit name=XXX value="XXX" onBlur=gehtlos()>
<input type=reset value="XXX" onBlur=gehtlos()>
<input type=file name="XXX" onBlur=gehtlos()>
<input type=password name="XXX" onBlur=gehtlos()>
<select name=XXX onBlur=gehtlos()>
<frameset
rows="XX,XX" onBlur=gehtlos()>
<textarea
rows=XX cols=XX onBlur=gehtlos()>
|
Die Funktion onFocus wird
ausgeführt, wenn der man den Focus auf eines der
genannten Elemente setzt, zu Deutsch, wenn man drauf clickt. |
Bei manchen dieser event handler ist nicht so
ohne weiteres ersichtlich, wie man sie einsetzt. Ein paar
Beispiele sollen dies Erläutern.
| Funktionen
aufrufen über einen event handler |
|
Beispiel 1: Aus einer select box den neu angewählten
Menüpunkt rausfischen und an eine Funktion übergeben.
<html><head><title>JavaScript
Beispiel 1</title>
<script language="JavaScript">
function zeigen()
{
alert("Sie haben "+document.banane.kirsche.options[document.banane.kirsche.options.selectedIndex].value+"
angewählt");
}
</script>
</head>
<body>
<form name=banane>
Wähl mal was <select name=kirsche onChange=zeigen();>
<option value=Aprikose>Aprikose
<option value=Himbeere>Himbeere
<option value=Kirsche>Kirsche
</select>
</form>
</body></html>
Bevor wir uns klar machen,
wie der Skript funktionniert, schauen wir hier
erstmal, was er macht. Alles klar ? Wenn man den Wert in der
select box verändert, popt ein alert Fenster auf in dem
dann steht, was man gewählt hat. Man könne an dieser
Stelle zum Beispiel auch eine Webadresse eingeben, und den
User dann an diese Adresse weiterleiten um mal ein für
die Praxis relevanteres Beispiel zu nennen. Zu dem onChange
gibt es eigentlich nichts zu sagen, schwieriger ist hier wohl
eher die Frage, wie der angeclickte Wert an die Funktion zeigen
übergeben wird. Wir werden darauf im Kapitel Zugriffe
auf Formularelemente zurückkommen.
| onClick
in Verbindung mit dem radio button: der china song |
|
<html><head><title>Chinesensong</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"></head>
<body bgcolor=#CCCCCC>
<center>
<script language="JavaScript">
var chinesen="Drei Chinesen mit dem
Kontrabaß, \nsaßen auf der Straße und erzählten
sich was, \nda kam die Polizei ja was ist den das, \ndrei
Chinesen mit dem Kontrabaß";
function aender1()
{
chinesa=chinesen.replace(/e/g, "a");
document.rein.rin.value=chinesa;
}
function aender2 ()
{
chinese=chinesen.replace(/e/g, "e");
document.rein.rin.value=chinese;
}
function aender3 ()
{
chinesi=chinesen.replace(/e/g, "i");
document.rein.rin.value=chinesi;
}
function aender4 ()
{
chineso=chinesen.replace(/e/g, "o");
document.rein.rin.value=chineso;
}
function aender5()
{
chinesu=chinesen.replace(/e/g, "u");
document.rein.rin.value=chinesu;
}
document.write("<font face=arial>Drei
Chinesen mit dem Kontrabaß, <br>saßen auf
der Straße und erzählten sich was, <br>da
kam die Polizei ja was ist den das, <br>drei Chinesen
mit dem Kontrabaß</font>");
</script></center>
<form>
<center><table border=1 width=80% bgcolor=c0c0c0>
<tr><td colspan=10 align=middle >Sie können
in dem Kinderlied oben das e durch einen anderen Vokal ersetzen.
Clicken Sie den Buchstaben an, durch den
Sie das e ersetzen möchten.</td></tr>
<tr><td align=middle >a</td><td align=middle><input
type=radio name=vokal onClick=aender1(); ></td><td
align=middle>e</td><td align=middle><input
type=radio name=vokal onClick=aender2(); ></td>
<td align=middle>i</td><td align=middle><input
type=radio name=vokal onClick=aender3(); ></td><td
align=middle>o</td><td align=middle><input
type=radio name=vokal onClick=aender4(); ></td>
<td align=middle>u</td><td align=middle><input
type=radio name=vokal onClick=aender5(); ></td></tr>
</table></center></form>
<center><form name=rein>
<textarea name=rin rows=5 cols=50></textarea>
</form></center>
</body>
</html>
Bevor wir den Skript durchsprechen, machen
wir uns klar, was er überhaupt macht, indem wir auf
hier
clicken.
Alles klar ? Das bekannte Kinderproblem wird eindeutig gelöst.
Bekanntlich soll ja hier der Buchstabe e im Reim "Drei
Chinesen mit dem ....." durch einen anderen Vokal ersetzt
werden. Genau das macht dieser kleine JavaScript. Die Details
des Programms werden wir im Kapitel Arbeiten mit Zeichenketten
behandeln. Das einzige was uns hier interessiert, ist die
Tatsache, dass wir den event handler onClick an das Formularelement
radio binden können.
| Ändern
der Farbe des Textes |
|
Besonders praktisch ist,
dass sich bestimmte event handler auch an div binden lassen.
der div tag hat eigentlich überhaupt keine Wirkung, ausser
dass man eben cascading style sheets an ihn binden kann, die
man dann wiederum mit JavaScript manipulieren kann. Weiter
wird der div tag von dem document object model mit verwaltet,
so dass er in diesem Zusammenhang auch genutzt werden kann.
Davon später.
<html><head><title>Farbe
des Textes verändern mit Cascading Style Sheets</title></head>
<body>.
<div id="hintergrund1" style="position:absolute;
top:150;left:200;background-color:blue;font-family:arial;font-size:20px;color:yellow"
onMouseOver=document.getElementById("hintergrund1").style.backgroundColor='red';
onMouseOut =document.getElementById("hintergrund1").style.backgroundColor='blue';>
Über allen Wipfeln ist Ruh<br>
über allen Gipfeln spürest du kaum einen Hauch<br>
Die Vöglein schweigen im Walde<br>
wart nur, bald ruhest du auch</div>
</body>
</html>
Bevor wir den Skript durchsprechen, machen
wir uns hier
klar, was er bewirkt.
Und? Was passiert? Deutlich oder? Wenn man mit der Maus in
das Gedicht fährt, in jenes berühmte von Goethe,
wird es rot. Wir sehen also, dass wir onMouseOver und onMouseOut
auch an den div tag binden können. Manche Leute mögen
sich jetzt eher für die CSS (cascading style sheets)
interessieren. Die sind aber im Moment nicht unser Thema,
sie werden das im Kapitel Cascading Style Sheets.
| Pop
up Fenster wenn sich eine Seite lädt |
|
Sinnvoll eingesetzt, wäre dies eine gute
Sache. Da es aber meistens nicht sinnvoll eingesetzt wird,
ist es keine gute Sache mehr, sondern in der Regel nervig.
<html><head><title>PopUp
Fenster nerven</title></head>
<script language="JavaScript">
function nerven()
{
window.open ("nervtoeter1.htm" , 'Nervtoet1', 'width=200,height=50');
window.open ("nervtoeter2.htm" , 'Nervtoet2', 'width=200,height=50');
window.open ("nervtoeter3.htm" , 'Nervtoet3', 'width=200,height=50');
}
</script>
<body bgcolor=blue onload="nerven()";>
<font color=red size=8>
Das ist ein Beispiel für diese nervigen PopUp Fenster.
Man geht auf eine Seite und hat dann auf einmal 100 von
diesen Viechern auf dem Schirm, die man dann alle wieder
zumachen muss.
</body></html>
Wer wissen will, was dieser Skript macht,
der muss auf hier
clicken. Wir erlben dann den Pop Up Unsinn
in seiner ganzen Pracht. Es öffnet sich nicht nur ein
Fenster, sondern drei. Die Sache ist aber noch steigerungsfähig.
|
Pop up Fenster, wenn der User die Seite schliesst |
|
Wenn der User eine Seite schliesst, will er
diese verlassen. Beim schliessen eines Fensters eine neue
Seite aufzublenden, die dann unter Umständen wieder eine
neue Seite aufblendet wenn man sie schliesst, die dann wieder
.... ist fast schon strafrechtlich zu bewerten, als Nötigung.
Genau dies macht das folgende Beispiel.
<html><head><title>PopUp
Fenster nerven</title></head>
<script language="JavaScript">
function ciao()
{
window.open ("ciaobella.htm" , 'Nervtoet', 'width=200,height=250');
}
</script>
<body bgcolor=blue onUnload="ciao()";>
<font color=red size=8>
Das ist ein Beispiel für onUnload. Auch etwas im Prinzip
unverschämtes. Der user erhält eine Message wenn
er
die Seite verläßt, also wenn er z.B. auf einen
<A Href=Hyperlink.htm><font color=yellow>Hyperlink.htm</font></A>
klickt. Macht er den Browser einfach zu, funktionniert das
Spiel nicht.
</font>
</body></html>
Und wieder kann man sich anschauen, was
das Skript macht, indem man hier
clickt. Wir sehen also, dass bei Verlassen
der Seite ein Pop up Fenster erscheint.
Die Zusammefassung dieses Kapitel kann kurz ausfallen: JavaScript
Funktionen können nur über event handler, Hyperlinks
oder Formular aufgerufen werden. Am häufigsten werden
sie über event handler aufgerufen. Wir haben gesehen,
welche event handler es gibt, an welche tags sie gebunden
werden können. Die Beispiele dürften dann die im
Prinzip simplen Zusammenhänge deutlich gemacht haben.
|
 |
