Einführung in JavaScript

geschrieben von Uwe Debacher 1999

JavaScript ist eine Programmiersprache, die Ende 1995 von der Firma Netscape entwickelt wurde. Die Syntax (Sprachregeln), wurde angelehnt an die Sprache Java der Firma Sun. Trotzdem darf man die beiden Sprachen nicht durcheinanderbringen, JavaScript findet sich immer in lesbarer Form im Quelltext einer HTML-Seite, Java-Programme sind in getrennten Dateien abgelegt und zwar in einer nicht lesbaren (compilierten) Form.

Der erste Browser, der JavaScript unterstützte, war der Netscape Navigator 2.0. Bedingt durch den großen Erfolg wurde die Sprache von Netscape weiterentwickelt und Microsoft sah sich gezwungen eine ähnliche Sprache zu konzipieren, die als Jscript bezeichnet wird. Diese beiden Sprachen sind sehr ähnlich, aber mit kleinen und gemeinen Unterschieden. Es wird zwar versucht den Sprachumfang zu standardisieren, aber das ist ein mühsames Verfahren.

Mit JavaScript kann man einige Dinge nicht machen, dass ist bewußt so konzipiert, damit der Programmierer nicht die Festplatte eines fernen Rechners ausspionieren kann. Größte Vorsicht ist dagegen bei ActiveX oder Visual Basic Script anzuraten, da damit auch Programme auf dem Rechner gestartet werden können.

Wir arbeiten in der Schule mit dem Netscape Communicator 4.07 und können damit die aktuelle Version 1.3 vom JavaScript einsetzen.

 

1.0 Grundlagen von JavaScript

Der Vorteil von JavaScript im schulischen Einsatz besteht darin, dass wir mit den gleichen Werkzeugen arbeiten können, wie bei der Erstellung von HTML-Seiten. Außerdem kann man aus jedem Beispiel lernen das einem gefällt, da man immer den Quelltext einsehen kann.

Bevor wie mit dem ersten Beispiel loslegen, noch ein Hinweis. Sollte man beim Programmieren mit Javascript einen Syntax-Fehler gemacht haben, so bekommt man einen entsprechenden Hinweis in der Statuszeile von Netscape. Will man mehr Informationen über die Fehlerursache haben, so tippt man javascript: in die Adresszeile des Browsers.
Es öffnet sich dann ein zusätzliches Fenster, das alle bisherigen Javascript-Fehler anzeigt.

 

1.1. Hallo Welt mit JavaScript

Für fast alle Programmiersprachen benutzt man als erstes Beispiel ein kleines Programm, das den Gruß Hallo Welt" ausgibt. Dieses Programm sieht in JavaScript folgendermaßen aus (Beispiel 1):

 <html>
 Dies ist normales HTML.<br>
 <script language="JavaScript">
 document.write("Hallo Welt! Dies ist JavaScript");
 </script>
 <br>
 Wieder normales HTML.
 </html>

Auf dem Bildschirm erscheinen die drei Textzeilen vollkommen gleichartig, es ist also nicht zu erkennen, welche Textausgabe von dem Script vorgenommen wurde und welche einfaches HTML darstellt.

Wie man hier sieht wird ein JavaScript-Programm einfach mit dem Tag Script in die Seite eingebunden. Zwischen dem Anfangs- und dem Endtag stehen dann die Befehle in JavaScript.

Die Java-Script Zeile ist so zu interpretieren Schreibe (write) Hallo Welt! dies ist JavaScript" in das Dokument (document).

 

1.2 Einfache Beispiele für Ausgaben

Natürlich kann man auch mehrere derartige Befehle ausführen (Beispiel 2):

 <html>
 <script language="JavaScript">
 document.write("Hallo Welt!<br>");
 document.write("Am GyLoh lernen wir ");
 document.write("sogar JavaScript");
 </script>
 </html>

Man kann in JavaScript-Ausgaben sogar rechnen (Beispiel 3):

 <html>
 <script language="JavaScript">
 document.write("Das Ergebnis von 27 + 5 * 3 ist: ");
 document.write(27 + 5 * 3);
 </script>
 </html>

 

1.3. Abschalten der Programme für Browser ohne JavaScript

Falls der Browser des Betrachters kein JavaScript versteht, oder JavaScript abgeschaltet wurde, wird der Quelltext der Seite angezeigt. Will man dieses Verhalten unterbinden, so muß man den quelltext vor diesen Browsern verstecken.

Dazu kennzeichnet man den gesamten Quelltext in einen Kommentar. Moderne Browser finden auch darin das JavaScript. Ein Kommentar in HTML wird mit <!--" begonnen und mit --> beendet (Beispiel 4):

 <html>
 Dies ist normales HTML.<br>
 <script language="JavaScript">
 <!-- vor alten Browsern verstecken
  document.write("Hallo Welt! Dies ist JavaScript.");
 // wieder zeigen -->
 </script>
 <br>
 Wieder normales HTML.<br>
 </html>

Browser ohne JavaScript zeigen nun einen Teil der Seite nicht an. Will man den Benutzer auf dieses Problem hinweisen, so kann man den Tag <noscript> benutzen (Beispiel 5):

<html>
Dies ist normales HTML.<br>
<script language="JavaScript">
<!-- vor alten Browser verstecken
document.write("Hallo Welt! Dies ist JavaScript.");
// wieder zeigen -->
</script>
<noscript>
Sie haben keinen JavaScript-f&auml;higen Browser!
</noscript>
<br>
Wieder normales HTML.<br>
</html>

So erfährt der Benutzer wenigstens, dass ihm etwas entgeht, wenn JavaScript nicht aktiviert ist.

 

1.4. Aktionen auf Knopfdruck

Mit JavaScript kann man auch auf Aktionen des Benutzers reagieren. Das folgende Beispiel bring einen Knopf auf die Seite, wenn dieser angeklickt wird, dann erscheint ein Popup-Fenster (Beispiel 6):

 <html>
 <form>
 <input type="button" name="Knopf"
 value="Dr&uuml;ck mich!"
 onClick="alert('Hallo Welt!')">
 </form>
 </html>

Man kann die entsprechende Meldung aber auch ins Dokument oder in die Statuszeile schreiben (Beispiel 7):

<html>
<form>
<input type="button" name="Knopf"
value="Dr&uuml;ck mich!"
onClick="window.status='Hallo Welt!'">
</form>
</html>

 

1.5. Funktionen I

Im vorigen Beispiel war zu sehen, wie man einen Befehl z.B. mit einer Schaltfläche, einem Knopf verbinden kann. Normalerweise möchte man auf Knopfdruck aber mehr als nur einen einfachen Befehl ausführen.

Mehrere Befehle bzw. komplexe Aktionen kann man zu einem einzigen Befehl zusammenfassen, indem man eine Funktion definiert. Wie das geht, zeigt das folgende Beispiel 8:

<html>
<head>
<script language="JavaScript">
<!-- vor alten Browsern verstecken
function schreibeText() {
document.write("JavaScript ist einfach toll! ");
document.write("Man kann es nicht oft genug ");
document.write("wiederholen... <br>");
}
// wieder zeigen -->
</script> </head>
<body>
<script language="JavaScript">
<!-- vor alten Browsern verstecken
// 3 Funktionsaufrufe
schreibeText();
schreibeText();
schreibeText();
// wieder zeigen -->
</script> </body> </html>

Die Funktion im Beispiel heißt schreibeText und ist im Kopf der Seite untergebracht. Es spielt zwar im Prinzip keine Rolle, wo die Funktion untergebracht ist, aber wenn sie im Kopf steht, dann ist sie auf alle Fälle schon geladen, wenn sie zum ersten Mal aufgerufen wird. Von daher sollte man Funktionen generell im Seitenkopf unterbringen.

Aufgerufen wird die Funktion dann im Körper (body) der Seite, indem ihr Name angegeben wird. Die runden Klammern gehören zu den Sprachregeln und müssen unbedingt mit angegeben werden.

 

2. Formulare

Formulare gehören im Prinzip schon zu HTML, haben also eigentlich nichts mit JavaScript zu tun. Wenn man ein Formular ausfüllt und abschickt, so muß es aber auch irgendwo von einem Programm entgegengenommen und ausgewertet werden. Daher haben wir bisher nicht mit Formularen gearbeitet. Im Zusammenhang mit JavaScript sind Formulare unentbehrlich, wenn wir Eingaben haben wollen oder sonstige Interaktion mit dem Benutzer.

Ein Formular besteht z.B. aus den folgenden Tags (Kursiv gesetzte Wörter sind Platzhalter für eigene Bezeichner):

<FORM ACTION="auswertung" METHOD="post">
<INPUT TYPE="text" NAME="name" SIZE="Size"
MAXLENGTH="Länge">
<INPUT TYPE="submit" VALUE="Absenden">
<INPUT TYPE="reset" VALUE="Verwerfen">
</FORM>

Mit dem Einleitungstag muß ein Programm angegeben werden, das die Eingabedaten auswertet, in diesem Fall ein Programm namens auswert". Zusätzlich muß angegeben werden, wie dieses Programm die Daten erhält. Dazu gibt es die Möglichkeiten get" und post". Bei der Methode get" werden die Daten einfach an die URL des Auswertprogrammes angehängt:

auswert?name=Meier&vorname=Klaus

Bei der Methode post" sieht man diese Daten nicht, da eine Art Dialog erfolgt. Bei der Programmentwicklung ist die Methode get" praktischer, im endgültigen Programm ist post" vorteilhafter.

Die zweite Zeile definiert ein Eingabefeld mit dem Namen name" und der Größe Size". Diese Angabe betrifft nur die Darstellung auf dem Bildschirm. Die Maximalzahl der Zeichen die eingegeben werden kann wird auf Länge" festgelegt.

Normalerweise hat ein Formular natürlich mehr als ein Eingabefeld. Die einzelnen Felder werden dabei durch ihre Namen unterschieden.

Wichtig für jedes Formular ist auch ein Knopf" zum Abschicken. Dazu dient der Typ submit". Die Daten im Formular werden ausgelesen und an das Auswertprogramm übergeben. Üblich in Formularen ist auch ein Resetknopf". Klickt man auf diesen Knopf, so werden alle Eingabefelder gelöscht.

 

2.1. Ergänzungen zu Formularen

Als action" kann anstelle eines eigentlichen Auswertprogrammes auch eine Mail verschickt werden:

<FORM ACTION="mailto:debacher@gyloh.hh.schule.de"
METHOD="post" enctype="text/plain">

Da wir momentan nicht die Möglichkeit haben Programme auf dem Server zu erstellen bleiben wir erst einmal dabei Formulardaten als e-Mail zu verschicken. Die Angabe enctype="text/plain" bewirkt, dass die Felder zeilenweise untereinander ausgegeben werden. Läßt man diese Angabe weg, so wird die Mail recht unübersichtlich.

Die Angabe von ACTION darf man auch weglassen, dass macht aber nur Sinn, wenn man wie im Abschnitt 1.4 die Auswertung mit JavaScript vornimmt.

Das Eingabefeld vom Typ text" erlaubt auch die Angabe eines Wertes, der vorab in das Feld eingetragen wird.

<INPUT TYPE="text" NAME="name" VALUE="Klausi">

Diese Möglichkeit ist besonders dann wichtig, wenn man mittels Formular vorhandene Datensätze ändern möchte.

Es stehen innerhalb eines Formulars nicht nur Eingabezeilen zu Verfügung.

 

2.2. Hidden

Eine Angabe der folgenden Art:

<INPUT TYPE="hidden" NAME="name" VALUE="Klausi">

bewirkt keinerlei Darstellung auf dem Bildschirm. Dieses Feld wird mit seinem Wert einfach nur an das Auswertprogramm übergeben, ohne daß der Benutzer Eingabe machen kann oder überhaupt etwas von diesem Feld bemerkt. Dieser Tag macht nur Sinn, wenn ein VALUE mit angegeben wird.

 

2.3. Password

Auch dies ist nur eine Variation des Types Text.

<INPUT TYPE="password" NAME="name">

Hierbei wird der Eingabetext nicht auf dem Bildschirm dargestellt.

 

2.4. Textarea

Mit diesem Tag wird ein Eingabefeld definiert, dessen Höhe und Breite festgelegt werden müssen

<TEXTAREA NAME="name" ROWS=Höhe
COLS=Breite>
Vorgabetext
</TEXTAREA>

Dem Eingabefeld kann man leider keine Maximalzahl von Zeichen übergeben. Höhe und Breite beziehen sich auf die Bildschirmdarstellung. Innerhalb des Bereiches kann gescrollt werden.

Vorgaben werden hier nicht mit dem value Tag eingetragen, sondern zwischen Anfangs- und Endtag gesetzt.

 

2.5. Auswahlfelder

Will man keine freie Eingabe zulassen, sondern dem Benutzer nur die Auswahl zwischen vorgegebenen Werten ermöglichen, dann bietet sich die folgende Kombination an:

<SELECT NAME="name" SIZE=Zeilen>
<OPTION VALUE="wert">Beschreibungstext
<OPTION SELECTED
VALUE="wert">Beschreibungstext
 ...
</SELECT>

Hiermit stelle ich dem Benutzer ein Feld zur Verfügung, das mit einem Mausklick geöffnet wird und die angegebenen Einträge zur Auswahl stellt. Nachdem ein Eintrag angeklickt wurde schließt sich das Auswahlfenster wieder.

Ein Wert darf durch Zusatz von SELECTED als voreingestellt gekennzeichnet werden. Dieser Wert erscheint dann auch im geschlossenen Eingabefeld.

 

2.6. Checkboxen

Die Verwendung von Auswahlfeldern ist sehr platzsparend. Manchmal möchte man aber alle Optionen immer auf dem Bildschirm sehen, dann arbeitet man besser mit Checkboxen

<INPUT TYPE="checkbox" NAME="name1"
VALUE="wert1">Text1<br>
<INPUT TYPE="checkbox" NAME="name2"
VALUE="wert2">Text2<br>

Für jeden der Einträge taucht auf dem Bildschirm ein ankreuzbares Kästchen auf. Diese Kästchen sin voneinander unabhängig. Es können also z.B. alle Kästchen oder kein Kästchen angekreuzt sein. Läßt man den VALUE-Eintrag weg, so wert im Zweifelsfall der Wert on" genommen.

 

2.7. Radiobuttons

Will man erreichen, daß immer nur eine Möglichkeit aus einer Auswahl markiert werden kann, dann arbeitet man besser mit Radiobuttons:

<INPUT TYPE="radio" NAME="name"
VALUE="eintrag1">Text1<br>
<INPUT TYPE="radio" NAME="name"
VALUE="eintrag2">Text2<br>

Hier haben alle Felder den gleichen Namen aber unterschiedliche Werte.

 

2.8 Ein kleines Beispiel

Im folgenden Seitenquelltext sind fast alle Möglichkeiten berücksichtigt (Beispiel 9):

<!-- Bespielformular von Uwe Debacher,
erstellt am 18.09.98
letzte Aenderung am 12.02.99 -->
<HTML><HEAD><TITLE>Beispielformular</TITLE></HEAD>
<BODY><CENTER><H1>Beispielformular</H1></CENTER>
<FORM ACTION="mailto:gast@server" METHOD="post" enctype="text/plain">
<!-- Ein verstecktes Feld -->
<INPUT TYPE="hidden" NAME="geheim" VALUE="Webformular">
<!-- Ein normales Eingabefeld -->
Wie hei&szlig;t du?<br>
<INPUT TYPE="text" NAME="name" SIZE=20 MAXLENGTH=50>
<!-- Ein Textfeld -->
<p>Sage mir deine Meinung:<br>
<TEXTAREA NAME="meinung" ROWS=3 COLS=60>
Ich habe keine eigene Meinung
</TEXTAREA>
<!-- Ein Auswahlfeld -->
<p>Welches Verkehrsmittel benutzt du zur Schule?
<SELECT NAME="verkehrsm" SIZE=1>
<OPTION VALUE="b">BUS
<OPTION VALUE="a">Auto
<OPTION SELECTED VALUE="f">Fahrrad
</SELECT>
<!-- Checkboxen -->
<p>Besuchst du einen oder mehrere der folgenden
Leistungskurse?:<br>
<INPUT TYPE="checkbox" NAME="mathe">Mathematik
<INPUT TYPE="checkbox" CHECKED NAME="info">Informatik
<!-- Radiobuttons -->
<p>Wie gef&auml;llt dir diese Schule?:<br>
<INPUT TYPE="radio" NAME="urteil" VALUE="s">Sehr gut
<INPUT TYPE="radio" NAME="urteil" CHECKED VALUE="g">Gut
<INPUT TYPE="radio" NAME="urteil" VALUE="m">Mittel

<P><CENTER>
<INPUT TYPE="submit" VALUE="Absenden">
<INPUT TYPE="reset" VALUE="Verwerfen">
</CENTER>
</FORM>
</BODY></HTML>

Netscape macht daraus die folgende Darstellung:

Drückt man hier auf den Absenden" Knopf, so erhält der angegeben Empfänger eine Mail, die folgendermaßen aussieht:

Betreff: Form posted from Mozilla
Datum: Fri, 12 Feb 1999 16:47:09 +0100
Von: Uwe Debacher <debacher@gyloh.hh.schule.de.de>
An: gast@server
geheim=Webformular
name=
meinung=Ich habe keine eigene Meinung
verkehrsm=f
info=on
urteil=g

Man kann hier erkennen, dass Textfelder immer aufgeführt werden, auch wenn nichts eingegeben wurde. Bei Checkboxen wird nur dann etwas verschickt, wenn auch wirklich das Feld angewählt wurde.

Der Betreff der Nachricht wurde vom Netscape Communicator erzeugt, der sich immer selber als Mozilla ausgibt.

 

3. Auf Formularelemente zugreifen

Im Zusammenhang mit Formularen möchte man oft auf die Eingaben reagieren können, bevor das Formular wirklich abgeschickt wird. Damit kann man dann einen Teil der möglichen Fehler gleich abfangen.

Ein Beispiel hierfür zeigt das folgende Listing, das eine Erweiterung des Beispiels aus dem vorherigen Abschnitt darstellt (Beispiel 10):

 <!-- Bespielformular von Uwe Debacher, erstellt am 18.09.98 letzte Aenderung am 20.02.99 -->
 <HTML><HEAD><TITLE>Beispielformular</TITLE>
 <script language="JavaScript">
 <!--
  function bewerten() {
  var urteil = "Positiv: ";
  if (document.MeinFormular.name.value == "") {
   alert("Bitte Ihren Namen eingeben!");
   document.MeinFormular.name.focus();
   return false;
  }
  if (document.MeinFormular.verkehrsm.selectedIndex == 2)
   urteil = urteil + "Ideales Verkehrsmittel! ";
  if (document.MeinFormular.info.checked)
   urteil = urteil + "Idealer Leistungskurs! ";
  if (document.MeinFormular.urteil[0].checked)
   urteil = urteil + "Ideales Urteil! ";
  document.MeinFormular.geheim.value = urteil;
  }
 -->
 </SCRIPT></HEAD>
 <BODY><CENTER><H1>Beispielformular</H1></CENTER>
 <FORM ACTION="mailto:gast@server" METHOD="post" enctype="text/plain"
 name="MeinFormular" onsubmit="return bewerten()">
 ...

Entscheidend sind hier die Änderungen im Form-Tag. Zuerst bekommt das Formular einen Namen, dann kann man später einfacher darauf zugreifen. Weiter wird eine Funktion festgelegt, die immer dann aufgerufen wird, wenn der Submit-Knopf vom Benutzer gedrückt wurde. Eine solche Funktion, in unserem Fall heißt sie bewerten(), kann true (wahr, richtig) oder false (falsch, unwahr) zurückliefern. Voreingestellt ist true, wenn aber innerhalb der Prozedur mittels return false ein Fehler vermeldet wird, dann wird das Formular nicht abgeschickt.

Die Prozedur bewerten ist im head-Bereich des Formulars untergebracht und manipuliert das versteckte Eingabefeld geheim.

 

3.1. Eingabefelder und Textarea

An den Wert des Eingabefeldes name komme ich über name.value heran. Da das Feld Teil des Formulares MeinFormular ist, welches wiederum zum aktuellen Dokument gehört, ist die komplette Bezeichnung document.MeinFormular.name.value, über die ich den Inhalt des Eingabefeldes ermitteln bzw. verändern kann.

Im obigen Beispiel wird kontrolliert, ob in dieses Feld eine Eingabe gemacht wurde oder nicht. Wenn keine Eingabe gemacht wurde

if (document.MeinFormular.name.value == "")

dann wird eine Mitteilungsbox erzeugt

alert("Bitte Ihren Namen eingeben!");

das Absenden des Formulares unterbunden

return false;

und der Schreibcursor in das Feld name gesetzt:

document.MeinFormular.name.focus();

Die Entscheidung wird durch das Schlüsselwort if eingeleitet. In einer runden Klammer folgt dann das, was untersucht werden soll. Im vorliegenden Fall wird hier der Wert von unserem Eingabefeld mit dem leeren Text "" verglichen. Zum Vergleichen dient in JavaScript das doppelte Gleichheitszeichen. Das Ergebnis dieses Vergleiches kann true (richtig) oder false (nicht richtig) sein.

Nach der runden Klammer folgt dann die Anweisung, die dann ausgeführt werden soll, wenn die Bedingung erfüllt (also true) ist. Sollen dann mehrere Anweisungen ausgeführt werden, so wie im vorliegenden Fall, so werden diese Anweisungen mit den geschweiften Klammern zusammengefaßt.

Auf Elemente vom Typ hidden, password und Textarea wird in der gleichen Weise zugegriffen, wie auf normale Eingabefelder. Versteckte Eingabefelder bieten sich daher geradezu an, um dort die Ergebnisse von Berechnungen und Auswertungen unterzubringen.

 

3.2. Auswahlfelder

Bei Auswahlfeldern bleibt festzuhalten, das wievielte Element der Liste ausgewählt wurde, dazu dient selectedIndex. Mittels document.MeinFormular.verkehrsm.selectedIndex kann also ermittelt werden, das wievielte Element der Liste ausgewählt wurde. Gezählt wird ab Null, wurde also das erste Element ausgewählt, so ist selectedIndex = 0.

 

3.3. Checkboxen

Checkboxen sind entweder angekreuzt (checked) oder nicht. Wenn sie angekreuzt sind, dann hat checked den Wert true, ansonsten den Wert false.

Die Abfrage ist dadurch recht einfach, dass nicht erst mit einem der denkbaren Werte verglichen werden muss, da von vornherein ein Wahrheitswert zur Verfügung steht:

if (document.MeinFormular.info.checked)

Eine Abfrage der Form

if (document.MeinFormular.info.checked == true)

ist zwar korrekt aber nicht notwendig.

 

3.4. Radiobuttons

Alle Radiobuttons, die zu einer Gruppe gehören, haben den gleichen Namen. Einer aus dieser Liste von Buttons ist markiert (checked). Die Abfrage ist also eine Kombination aus 3.2. und 3.3.

if (document.MeinFormular.urteil[0].checked)

fragt ab, ob der erste Radiobutton ausgewählt ist. Die Nummer des jeweiligen Buttons wird in eckigen Klammern angegeben, wobei wieder ab Null gezählt wird.

 

4. Variable in JavaScript

In dem Beispiel aus dem vorherigen Abschnitt taucht eine erste Variable auf. Die Variable trägt den Namen urteil und beinhaltet Textinformationen. Eine Variable ist ein Platzhalter bzw. ein symbolischer Bezeichner für einen bestimmten Bereich im Speicher des Computers. Auf diesen Speicherbereich wird über den Namen dieser Variablen zugegriffen. Der Umgang mit Variablen besteht daher prinzipiell aus zwei Teilen, einerseits der Definition (Deklaration), andererseits dem normalen Gebrauch, der mit einem schreibenden Zugriff (Initialisierung) begonnen werden muß. Bei der Deklaration wird vom Computer der notwendige Speicher reserviert und mit dem Bezeichner in Verbindung gebracht.

In vielen Sprachen ist der Wert einer Variablen nach der Deklaration nicht definiert, er hängt von dem zufälligen Speicherinhalt zum Zeitpunkt der Deklaration ab. In JavaScript hat eine nicht initialisierte Variable immer den Wert null, den man aber nicht mit der Zahl 0 verwechseln darf. Die Variablendeklaration wird mit dem Schlüsselwort var, gefolgt vom Bezeichner für die Variable vorgenommen.

var urteil;

Bei der Initialisierung wird dann ein bestimmter Wert oder Text in die reservierten Speicherstellen geschrieben.

urteil = "Positiv: ";

Deklaration und Initialisierung können in Javascript zusammengefaßt werden:

var urteil = "Positiv: ";

Javascript kennt zwei Typen von Variablen:

Über den Typ wir dann entschieden, wenn einer Variablen ein Wert zugewiesen wird.

var one = 1;
var two = "1";

Die Variable one enthält die Zahl 1, die Variable two den Text 1. Der Unterschied wird erst dann deutlich, wenn man Variable verknüpft:

 var one = 1;
 var two = 2;
 two = one + two;

Die Variable two hat hier am Ende den Inhalt 3.

 var one = "1";
 var two = "2";
 two = one + two;

Die Variable two hat hier am Ende den Wert 12".

Interessant wird es, wenn man bei der Verknüpfung die Typen mischt:

 var one = 1;
 var two = "2";
 two = one + two;

Auch hier hat two an Ende den Inhalt 12", das Javascript im Zweifelsfall alle Variablen als Strings verknüpft.

Für Strings (Texte) ist die Addition die einzige sinnvolle Verknüpfung. Hier werden die Texte einfach in der angegebenen Reihenfolge hintereinander gesetzt.

Für Zahlen sind die folgenden Verknüpfungen definiert, die auch von der Mathematik her bekannt sein dürften:

 + Addition
 - Subtraktion
 * Multiplikation
 / Division
 % Modulo (Rest bei der Division)

Wer sich mit der Literatur beschäftigt, der wird feststellen, dass es noch einige Verknüfungen zusätzlich gibt, aber die werden erst bei Bedarf eingeführt.

 

5. Verzweigungen mit if

In den Beispiel aus 3. taucht mehrfach der Fall auf, dass ein Befehl nur dann ausgeführt werden soll, wenn eine bestimmte Bedingung eingetreten ist. Konkret sollte dort z.B. eine Alert-Box ausgegeben werden, wenn im Formular kein Name angegeben wurde:

if (document.MeinFormular.name.value == "")

alert("Bitte Ihren Namen eingeben!");

Bei diesen Zeilen wird der Befehl alert("Bitte Ihren Namen eingeben!"); nur dann ausgeführt, wenn die Bedingung innerhalb der runden Klammer als wahr (true) beurteilt wird, also kein Name eingegeben wurde. Wird die Bedingung als falsch (false) beurteilt, weil ein Name eingegeben wurde, dann wird der Befehl übersprungen.

Soll die Ausführung mehrere Befehle von der Bedingung abhängig sein, so klammert man diese Befehle in geschweifte Klammern:

if (document.MeinFormular.name.value == "") {
 alert("Bitte Ihren Namen eingeben!");
 document.MeinFormular.name.focus();
 return false;
}

Die Einrückungen der abhängigen Zeilen gehören nicht zu den Sprachregeln, erleichtern aber die Lesbarkeit des Programmes.

Vergleichen kann man Zahlen und Texte mit folgenden Operatoren

 == gleich
 != ungleich
 <  kleiner
 >  größer
 <= kleiner oder gleich
 >= größer oder gleich

Es gibt noch eine erweiterte Version der Verzweigung, bei der in beiden Fällen etwas passiert:

if (document.MeinFormular.name.value == "")
 alert("Bitte Ihren Namen eingeben!");
else
 alert("Der Name ist: " + document.MeinFormular.name.value);

Das Wort else kann man mit sonst übersetzen. Wenn kein Name angegeben wurde, dann wird gewarnt, sonst wird der Name zur Kontrolle ausgegeben.

Auch hier kann man natürlich wieder mit geschweiften Klammern arbeiten.

 

6. Ereignisse

Bei einer graphischen Benutzeroberfläche wie Windows spielen Ereignisse eine wichtige Rolle. Jeder Tastendruck, jede Mausbewegung, alles ist ein Ereignis, auf das das Programm eventuell reagieren muß.

In dem Beispiel aus 3. haben wir schon mit einem Ereignis zu tun gehabt, mit den folgenden Zeilen wurde unsere Funktion bewerten() immer dann aufgerufen, wenn der Knopf zum abschicken des Formulares gedrück wurde, also auf das Ereignis beim Übertragen (onsubmit):

<FORM ACTION="mailto:gast@server" METHOD="post" enctype="text/plain"
name="MeinFormular" onsubmit="return bewerten()">

An diesem Besipiel kann man schon viel über die Ereignisse unter JavaScript sehen. Ein Befehl, hier der Aufruf von bewerten() wird an ein bestimmtes Objekt, hier den Knopf, und eine bestimmte Aktion, hier onsubmit gebunden.

 

6.1. onMouseover und onMouseout

Sehr häufig sieht man auf Webseiten, dass in der Statuszeile ein Text auftaucht, wenn man mit der Maus über einen Link geht. Hier muß man also die Ausgabe eines Textes an einen Link binden und das Ereignis onmouseover:

<A HREF="http://lbs.hh.schule.de" onMouseover="window.status='Hamburger
Bildungsserver'; return true;">HBS</A>

Das return true; ist hier wichtig, um zu verhindern, dass der Browser hier wie sonst üblich die URL des Links in der Statuszeile ausgibt.

Von Bedeutung sind natürlich auch wieder die unterschiedlichen Anführungsstriche, die doppelten gehören zum HTML, die einfachen zum eingebundenen JavaScript.

Dummerweise bleibt der Text nun auch dann in der Statuszeile stehen, wenn die Maus vom Link wegbewegt wurde. Also benötigen wir auch noch das Ereignis onmouseout:

<A HREF="http://lbs.hh.schule.de" onMouseover="window.status='Hamburger
Bildungsserver'; return true;" onMouseout="window.status='';">HBS</A>

Nun wird der Text immer dann gelöscht, wenn die maus den Linkbereich wieder verläßt.

 

6.2. onSubmit und onReset

Das Ereignis onsubmit haben wir bereits angesprochen. Es tritt immer dann ein, wenn der Submit-Knopf gedrückt wurde. Auch für den Reset-Knopf gibt es ein entsprechendes Ereignis, nämlich onreset.

<FORM ACTION="mailto:gast@server" METHOD="post" enctype="text/plain"
name="MeinFormular" onSubmit="return bewerten();" onReset=" alert('Schade keine Pizza');">

 

6.3. onLoad und onUnload

Die Bedeutung dieser Ereignisse zeigt das folgende Beispiel 11:

<html>
<body onLoad="alert('Herzlich Willkommen!')"
onUnload="alert('Auf Wiedersehen')">
Dies ist meine HTML-Seite.
<a href="http://lbs.hh.schule.de">Dies ist der HBS.</a>
</body>
</html>

Dieses Beispiel ist ziemlich nervig, da man von den Alert-Boxen geradezu belästigt wird. Das Ereignis onLoad tritt dann ein, wenn die Seite geladen wird, das Ereignis onUnload tritt dann ein, wenn die Seite wieder verlassen wird.

 

6.4. onFocus und onBlur

Eingaben sind immer nur an genau einer Stelle zur Zeit möglich. Hat man z.B. mehrere Eingabefelder auf dem Bildschirm, so kann man nur in eines davon gerade eingeben, man erkennt dieses an der blinkenden Schreibmarke. Dieses Element hat den Fokus.

Bekommt ein Element den Fokus, so tritt das Ereignis onFocus ein, verliert das Element den Fokus an ein anderes, so tritt das Ereignis onBlur ein:

<input type="text" name="Name" onFocus="window.status='Bitte den Namen
eingeben';" onBlur="window.status='';">

 

6.5. onClick

Viele Objekte kennen das Ereignis onClick. Dazu gehören vor allem Buttons, aber Checkboxen und Radiobuttons, sowie Links. Klickt man auf einen Link, so tritt dieses Ereignis ein, bevor die neue Seite aufgerufen wird.

 

7. JavaScript und die Zeit

Bei vielen JavaScript-Demos spielt die Zeit eine Rolle. Bei Lauftexten und Dia-Shows muß irgendwie auf die eingebaute Uhr des Rechners Bezug genommen werden. JavaScript verfügt über entsprechende Objekte.

 

7.1. Das Datums-Objekt

Das folgende kleine Beispiel zeigt, wie man auf das Datums-Objekt von JavaScript zugreifen kann (Beispiel 12):

 <html><body>
 <form name="Uhr">Momentan ist es:
 <input type="text" name="Zeit" size=6> Uhr</form>
 <script language="JavaScript">
 <!-- vor alten Browsern verstecken
 jetzt = new Date();
 Stunden = jetzt.getHours();
 Minuten = jetzt.getMinutes();
 document.Uhr.Zeit.value = Stunden + ":"+ Minuten;
 // wieder zeigen -->
 </script>
 </body></html>

Zuerst wird ein neues Objekt vom Typ Datum erzeugt, dem wir den Namen jetzt geben. Dieses Objekt beinhaltet die Uhrzeit von genau dem Zeitpunkt, zu dem es erzeugt wurde. Anschließend kann man Einzelinformationen von diesem Objekt abfragen und ausgeben.

Im Beispiel fragen wir mit jetzt.getHours() die Stunde und mit jetzt.getMinutes() die Minute der aktuellen Uhrzeit ab und geben die Informationen auf der HTML-Seite aus.

Welche Informationen ich von dem Objekt abfragen kann, ergibt sich aus der folgenden Übersicht, wobei zu erwähnen ist, dass das früheste Datum, mit dem man arbeiten kann, der 1.1.1970 ist.

Methode

Bedeutung

Wertebereich

getDate() Tag 1-31
getDay() Nummer des Wochentages 0-6 (0=Sonntag)
getHours() Stunde 0-23
getMinutes() Minuten 0-59
getMonth() Monat 0-11 (0=Januar)
getSeconds() Sekunden 0-59
getYear() Jahre seit 1900 70-... (105=2005)
getFullYear() Jahr Jahr vierstellig (2005=2005)
getTime() Millisekunden seit 1.1.1970 0-...

Zu jeder dieser Abfragemöglichkeiten (außer getDay()) gibt es auch eine entsprechende Möglichkeit die jeweilige Information zu setzen. Mit setDate(28) kann ich also den 28. einstellen. Derartige Zuweisungen wären zum Beispiel dann sinnvoll, wenn man einen der beliebten Zähler bis zum Jahr 2000 aufbauen wollte.

Dann würde man das akutelle Datum mit dem 1.1.2000 vergleichen, dazu muß man aber den 1.1.2000 auch eingeben können.

Etwas schöner wird das Beispiel, wenn man die Uhrzeitausgabe als Funktion in den Head-Bereich übernimmt und die Funktion dann beim Laden der Seite aufruft (Beispiel 13).

 <html><head>
 <script language="JavaScript">
 <!-- vor alten Browsern verstecken
 function zeige_zeit () {
  jetzt = new Date();
  Stunden = jetzt.getHours();
  Minuten = jetzt.getMinutes();
  Sekunden = jetzt.getSeconds();
  document.Uhr.Zeit.value= Stunden + ":" + Minuten+ ":" + Sekunden;
 }
 // wieder zeigen -->
 </script></head>
 <body onload = "zeige_zeit();">
 <form name="Uhr">Momentan ist es:
 <input type="text" name="Zeit" size=9> Uhr</form>
 </BODY>
 </html>

Als Ergänzung werden hier auch die Sekunden mit angezeigt.

 

7.2. Timer

Die Uhr aus den vorangegangenen Beispielen hat den Nachteil, dass sie nicht aktualisiert wird. Der Benutzer müßte immer wieder auf den Knopf Neu Laden drücken, um die aktuelle Uhrzeit angezeigt zu bekommen.

Für die automatische Aktualisierung der Uhrzeit gibt es in JavaScript die Timer. Ein Timer ist eine Art Stoppuhr, der man eine Zahl von Millisekunden und den Namen einer Funktion übergibt. Ist die Zeit abgelaufen, so wird die angegebene Funktion gestartet.

Timer = setTimeout('zeige_zeit()' , 1000);

Hier wird also die Funktion zeige_zeit() nach 1000 Millisekunden bzw. 1 Sekunde aufgerufen. Diese Zeile hängt man einfach ans Ende der Funktion und schon wird sie jede Sekunde aufgerufen (Beispiel 14).

<html><head>
<script language="JavaScript">
<!-- vor alten Browsern verstecken
function zeige_zeit () {
jetzt = new Date();
Stunden = jetzt.getHours();
Minuten = jetzt.getMinutes();
Sekunden = jetzt.getSeconds();
document.Uhr.Zeit.value= Stunden + ":" + Minuten+ ":" + Sekunden;
Timer = setTimeout('zeige_zeit()' , 1000);
}
// wieder zeigen -->
</script></head>
<body onload = "zeige_zeit();">
<form name="Uhr">Momentan ist es:
<input type="text" name="Zeit" size=9> Uhr.</form>
</BODY>
</html>

Die Genauigkeit dieser Uhr ist natürlich von der Genauigkeit der Uhr auf dem jeweiligen Rechner abhängig. Zusätzlich kommt noch hinzu, dass wir die Uhr nur 1 mal pro Sekunde aktualisieren. Da dies in der letzten Millisekunde liegen könnte, weicht die Uhr eventuell auch um knapp 1 Sekunde von der eingebauten Uhr ab.

Ein kleiner Schönheitsfehler ist die Tatsache, dass die Minuten und Sekunden mal eine, mal zwei Stellen benötigen. Das läßt sich aber mit einer einfachen Fallunterscheidung lösen:

Sekunden = jetzt.getSeconds();
if (Sekunden < 10) Sekunden = "0" + Sekunden;

Wenn die Zahl der Sekunden kleiner ist als 10, dann wird einfach eine 0 vorangestellt, wodurch immer eine zweistellige Sekundenzahl gewähleistet ist.

 

8. Wiederholungen

Manchmal möchte man Aktionen mehrfach durchführen. Dafür haben wir bisher den Timer benutzt. Es gibt aber auch direkte Wiederholungen in Javascript. Das folgende Beispiel zählt auf Knopfdruck einfach nur in der Statuszeile bis 1000:

 <HTML><HEAD>
 <SCRIPT language="JavaScript">
 <!-- vor alten Browsern verstecken
 function zaehlen() {
  for (i=0; i<=1000; i=i+1){
   window.status=i;
  }
 }
 // -->
 </SCRIPT></HEAD>
 <BODY>
 <FORM name="Zaehlformular">
 <INPUT type="button" value="zaehlen" onsubmit="zaehlen()">
 </FORM>
 </BODY></HTML>

Die Angaben über die Zahl der Wiederholungen finden sich in der runden Klammer. Hier stehen drei Angaben:

Zum Experimentieren mit diesen drei Werten kann man das Listing erweitern:

 <HTML><HEAD>
 <SCRIPT language="JavaScript">
 <!-- vor alten Browsern verstecken
 function zaehlen() {
  anfang=parseInt(document.Zaehlformular.von.value);
  for (i=anfang;i<=1000; i=i+1) {
   window.status=i;
  }
 }
 // -->
 </SCRIPT></HEAD>
 <BODY>
 <FORM name="Zaehlformular">
 Anfang: <INPUT type="text" name ="von" value="0"><br>
 <INPUT type="button" value="zaehlen" onclick="zaehlen()">
 </FORM>
 </BODY></HTML>

Jetzt wird der Startwert nicht mehr im Programm vorgegeben, sondern kann in dem Eingabefeld festgelegt werden.

Da Javascript Variablen im Zweifelsfall als Texte einstuft, müssen wir hier den Typ Zahl beim Auslesen des Fomularfeldes erzwingen, indem wir mittels parseInt in eine Zahl umwandeln. Dafür dürfen wir dann aber auch Angaben wie 42Meerschweinchen machen, von denen dann nur die Ziffern ausgewertet werden.

Gibt man entsprechend alle drei Angaben über Formularfelder ein, so kann man mit der Wiederholstruktur etwas experimentieren. Natürlich kann man den Zähler auch rückwärts zählen lassen!

Etwas felexibler kann man mit dem Beispiel 15 experimentieren, dass alle drei Werte flexibilisiert.

 

9. Lauftext in Java

Von vielen Web-Seiten sind durchlaufende Textzeilen, meist in der Statuszeile bekannt. Etwas ruhiger und im folgenden Beispiel dargestellt ist der Schreibmaschineneffekt, bei dem die Buchstaben nacheinander auf dem Bildschirm erscheinen.

Man benötigt dazu zwei globale Variable, die nicht innerhalb der Funktion definiert werden, und eine funktion, die sich über einen Timer selbst wieder aufruft (Beispiel 16):

 var pos=0;
 var text="Willkommen am GyLoh ";
 function schreib() {
  window.status=text.substring(0, pos);
  pos=pos+1;
  if (pos > text.length) {
   pos=0;
  }
  setTimeout("schreib()", 100);
 }

Diese Funktion ruft sich nach einer Sekunde selbst wieder auf. Sie gibt einen Teil des vorgegebenen Textes in der Statuszeile aus und zwar beginend mit dem ersten Zeichen (hat die Nummer 0) sovoeile Zeichen, wie in pos angegeben.
Nach der Ausgabe wird pos erhöht. Falls der Wert von pos die Länge des Textes über schreitet, dann wird pos wieder auf 0 gesetzt uns die Darstellung beginnt von vorne.

Man kann auch erreichen, dass sich mehrere Textzeilen abwechseln. Dazu muß man statt eines String text ein Array mit mehreren Strings benutzen (Beispiel 17):

 var pos=0;
 var zeile=0;
 var text= new Array();
 text[0]="Willkommen am GyLoh ";
 text[1]="Neu: Mailingliste f&uuml;r Ehemalige ";
 text[2]="Schau doch mal vorbei! ";
 function schreib() {
  window.status=text[zeile].substring(0, pos);
  pos=pos+1;
  if (pos > text[zeile].length) {
   pos=0;
   zeile=zeile+1;
   if (zeile > text.length) {
    zeile=0;
   }
  }
  setTimeout("schreib()", 100);
 }


geschrieben von Uwe Debacher, letzte Änderung am 6.5.99