Javascript Tutor - Lektion 4
Ereignisse.
Was ist ein Ereignis (event)? Ein Ereignis ist, wenn etwas passiert. So wie ein Drüberfahren mit der Maus, ein Mausklick, ein Laden der Seite etc.
Wir können eine einfache AlertBox aufgehen lassen, wenn die Seite geladen wird mit Hilfe des EventHandlers onLoad (beim Laden) im BODY-Tag...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function HelloWorld()
{
alert ('Hallo Welt!');
}
//--></SCRIPT>
</HEAD>
<BODY onLoad="HelloWorld()">
Hello
</BODY>
</HTML>
|
Was gibt es noch? Viele Leute nutzen den EventHandler onMouseOver (Maus darüber) bei Links. Hier ist das selbe Beispiel mit kleinen Änderungen...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function HelloWorld()
{
alert ('Hallo Welt!');
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="" onMouseOver="HelloWorld()">Hallo</A>
</BODY>
</HTML>
|
Du siehst, dass der Link nirgendwo hin zeigt. So wollen wir das nicht in einer fertigen Seite lassen, aber jetzt lernen wir ja erst, wir lassen es so.
Wir es können auch beim onMouseOut (Maus wegnehmen) machen. Die AlertBox geht nicht eher auf, als bis die Maus vom Link weggenommen wurde.
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function HelloWorld()
{
alert ('Hallo Welt!');
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="" onMouseOut="HelloWorld()">Hallo</A>
</BODY>
</HTML>
|
Noch ein weiterer EventHandler ist onClick (beim Klicken)...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="javascript"><!--
function HelloWorld()
{
alert ('Hallo Welt!');
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="" onClick="HelloWorld()">Hallo</A>
</BODY>
</HTML>
|
Übung: Jetzt bist Du dran... mache eine Seite, die nach Deinem Namen fragt und dann ausgibt Hallo DeinName!, wenn sie geladen wird.
Kann man mehrere Funktionen einbauen? Sicher! Du kannst so viele nutzen, wie Du willst. Aber am besten, Du nutzt nur wenige und diese gut geordnet, damit Du den Überblick behältst...
[AUSSCHNITT]
function HelloWorld()
{
alert ("Hallo Welt");
}
function HelloStinky()
{
alert ("Hallo Stinker!");
}
[AUSSCHNITT]
|
Übung: Da Du das jetzt weißt, möchte ich, dass Du eine Seite machst, die die drei roten Grafiken und zwei Funktionen verwendet. Ich möchte, dass die Seite beim Aufruf den Nutzernamen erfragt. Dann, wenn die Maus über die roten Grafiken fährt, geht eine AlertBox auf und gibt was aus wie: "Hallo Joe. Die Maus ist über Grafik 1".
Nun denke ich ist eine gute Gelegenheit, das Semikolon (;) am Ende jeder Zeile zu erklären. Das Semikolon sollte am Ende jeder Anweisung verwendet werden. Sie hilft dem Browser und sagt ihm, wann eine Anweisung zu Ende ist und wann die nächste beginnt. Du kannst auch mehrere Anweisung in eine Zeile schreiben, jede beendet mit einem Semikolon ...
anweisung1; anweisung2; anweisung3;ist das Gleiche wie
anweisung1; anweisung2; anweisung3;
| << Zurück Weiter >> |
 |
 |
