Java Script - Event-Handler, Basics
JavaScript (JS) ist eine objektoriente Scriptsprache, die von Netscape
entwickelt wurde, um anspruchsvollere Aufgaben (kleine Programme) direkt im
Browser auf dem PC des Webseiten-Besuchers auszuführen. JS wird nicht
kompiliert, sondern direkt im Browser interpretiert. JS ist somit Teil einer
.html-Datei, entweder direkt im Quelltext einer Seite oder als externe
Datei.
Wie üblich, ist die Umsetzung dieser Scriptsprache in Microsoft- und
nicht-Netscape-Browsern nicht identisch. Auch hier gilt: mit unterschiedlichen
Browsern vor dem Einsatz auf Ihrer Website testen!
Bitte berücksichtigen Sie auch, daß JS aus Sicherheitsgründen
in den Browsern abgestellt werden kann - weisen Sie also daraufhin, wenn
für Ihre Webseiten JS benötigt wird!
Sie können JS z.B. verwenden für
- Animationen
- Frameoperationen
- Eingabeprüfung bei Formularen
- benutzergesteuertes (dynamisches ?) Seitenlayout
- Texte neu aufbauen
- Taschenrechner, Kalender, Spiele
Sie brauchen das Rad nicht neu zu erfinden. Zahlreiche fertige Scripte finden
Sie unter
http://www.javascriptsource.com (in Englisch).
Ein gutes deutschsprachiges Tutorial findet sich unter
http://www.selfhtml.de/js-tut/
Ein JS Bestandteil in einer HTML-Datei aber auch in einer externen Datei
(Endung: .js) wird mit dem Tag
<SCRIPT language="JavaScript"
type="text/javascript">
eingeleitet. Das eigentliche Script wird in Kommentarzeilen <!-- bzw.
//--> eingeschlossen. Eine externe Datei wird mit dem Zusatz
src="datei.js"
eingeleitet.
JS kann zusammen mit den EventHandlern sinnvoll in vielen Tags
eingesetzt werden. Typische EventHandler sind
onMouseOver, onMouseOut
onLoad
onClick
onReset
onSubmit
Die Basis zum Verständnis von JS ist das Eingehen auf die Objektorientierte Grundlage. Dabei unterscheidet man
- Objekte wie Fenster, das Dokument selbst, ein Formular, die Browser-History oder das Datum
(window, document, form, navigator, location, date, history, ...)
- Eigenschaften (Properties) wie Status oder Name der Applikation (appName)
- Methoden/Funktionen wie focus(), javaEnabled(), back(), getDate(), getHours(), ...
Mit diesen werden Objekte verändert oder abgefragt.
Hierbei wird streng hierarchisch vorangegangen, vom allgemeinen Objekt zur speziellen Eigenschaft oder Methode. Die unterschiedlichen Bestandteile werden durch einen Punkt (.) getrennt, z.B. document.formular.feld.value.length
stellt die Länge des Wertes eines Feldes in einem Formular im aktuellen Dokument zur Verfügung.
Einfache Beispiele:
Laden onLoad
<body onload= "window.status='Dieser Text erscheint in der
Status-Zeile des Browsers auf der Seite ' + window.location + '.';return
true">
Beim Laden der Seite wird die Status-Zeile geändert.
Events
Im Folgenden werden onClick, onMouseOver und onMouseOut benutzt. Achten Sie auf
die Status-Zeile!
<center><br>
<form><input type="button" value="zurück" onclick="history.back()"></form>
<a href="" onclick="return false;" onmouseover="window.status='Das ist ein linker Pfeil';return true"
onmouseout="window.status='Da ist kein Pfeil';return true">
<img src="left.gif" width="20" height="22" border="0" alt="linker Pfeil"></a>
<a href="" onclick="return false;" onmouseover="window.status='Das ist ein rechter Pfeil';return true"
onmouseout="window.status='Da ist kein Pfeil';return true">
<img src="right.gif" width="20" height="22" border="0" alt="rechter Pfeil"></a><br>
<br></center>
PC-Infos anzeigen
Hier einige Infos zu Ihrem PC, ausgelesen vom Browser:
<script type="text/javascript" language="JavasScript">
<!--
document.write('Sie benutzen den Browser ' + navigator.appName + ', Version: ' + navigator.appVersion +
' auf einem ' + navigator.platform + ' System, um die Seite ' + window.location + ' anzuschauen.<br>');
if (navigator.cookieEnabled == true)
document.write('Sie haben Cookies erlaubt.<br>');
else if(navigator.cookieEnabled == false)
document.write('Wieso erlauben Sie keine Cookies ???<br>');
else
document.write('Dieser Browser verrät den Cookie-Status SO nicht!<br>');
if (navigator.javaEnabled() == true)
document.write('Auf Ihrem PC ist Java verfügbar.');
else if(navigator.javaEnabled() == false)
document.write('Sie haben kein Java auf Ihrem PC! Behindert Sie das beim Surfen ?');
else
document.write('Dieser Browser verrät den Java-Status SO nicht!');
//-->
</script>
Diese und weitere einfache Beispiele finden Sie in dieser Datei.
Kommentarzeilen (vor allem in einer zentralen Script-Datei)
werden mit /*
eingeleitet und mit */
abgeschlossen
werden.
Beispiel:/* Check der
Eingabefelder */
Der HTMLEditor Phase 52 verfügt über einen Tab
Java
, der sowohl EventsHandler einfügen kann, aber auch
Kommandostrukturen bereitstellt.
SelfHTML verfügt über eine ausführliche
JavaScript-Objektreferenz und einige Beispiele. Allerdings sollten Sie sich
dann schon etwas näher mit JS beschäftigt haben, z.B. durch diesen
Kurs! Bitte beachten Sie die Browserabhängigkeiten!