Multimediakurs Leinfelder, 7.3.2.2 JavaScript Level 2: Bausteine 2

Statements

Es gibt einige Syntax-Elemente von JavaScript, die keine Objekte, Methoden, Eigenschaften, Variablen (s.u.) oder Operatoren (s.u.) darstellen. Es sind bestimmte Schlüsselwörter, die für den Ablauf von Skripten notwendig sind. Einige kennen wir schon, z.B. function (beginnt die Definition einer Funktion), if (beginnt eine Abfrage), else (führt eine if-Abfrage weiter, falls sie negativ war), break (verlässt eine Schleifenabfrage), es gibt noch weitere Statements wie z.B. var (definiert eine Variable), for, while, switch-case, die wir noch nicht kennen. Sie sind Teil der "reservierten Wörter" zu denen noch einige andere gehören. Diese reservierten Wörter können nicht für Funktions- oder Variablennamen verwendet werden.

Operatoren

Wie in allen Programmiersprachen, gibt es in JavaScript auch Operatoren, einige haben Sie indirekt schon kennengelernt. Nachfolgend einige Beispiele für Operatoren; deren besondere Bedeutung werden wir insbesondere bei der Erklärung von Variablen kennenlernen. Lassen Sie sich nicht davon abschrecken, wenn Sie nicht gleich alles verstehen. Wir werden dies an Hand von Beispielen später leichter erklären können.

Arithmetische Operatoren, bei denen z.B. Zahlen verrechnet werden, z.B. +, -, *, /
weiterhin gibt es u.a. den Hochzähloperator (Inkrementierung) ++ sowie das Gegenteil -- (näheres hierzu später)

String-Operatoren, z.B.: + fügt Strings zusammen, z.B. "hallo" + ", Ihr Lieben"

Zuweisungsoperatoren: = z.B. var a=5 Hier wird einer Variablen (s.u.) ein bestimmter Wert (5) zugewiesen. Der Wert muss keine Zahl sein.

Vergleichsoperatoren: vergleichen zwei Variable oder Ausdrücke und geben einen true oder false-Wert (sog. Boolscher Wert) zurück:
== Gleichheitsoperator (z.B. document.bgColor=="#ff0000"
!= Ungleichheitsoperator
>, >=, <, <= (kleiner, kleiner gleich, größer, größer gleich).

Logische Operatoren, z.B. für if-Abfragen:
if (a<=10 && b>=20). && ist das logische UND
Aus dieser Abfrage wird true oder false zurückgegeben.
|| logisches ODER; wiederum kann bei einer if-Abfrage true oder false zurückgegeben werden.
! logisches nicht, z.B. !a ; z.B. if (a<=10 && !b)

sog. bitwise logic Operators:
vergleichbar zu oben, jedoch werden bei Verwendung dieser Operatoren Zahlen automatisch in das binäre Format umgewandelt (die Zahl 9 z.B. zur Binärzahl 1001); hier gibt es u.a. & (bitweises UND), | (bitweises ODER), ^ (bitweises EntwederOder) usw.

Variablen

Variablen haben wir bislang noch nicht verwendet, sie sind aber wesentlicher Bestandteil jeder Programmiersprache und damit auch von JavaScript. Die Variablen sind in JavaScript ganz einfach definierbar. Außerdem ist es für JS-Variablen egal, ob Zahlen, Buchstabenwerte oder Wahrheitswerte (true/false, siehe unten) definiert werden. Eine Variable dient insbesondere dazu, einen kleinen RAM-Speicherplatz zu reservieren, in dem ein Wert gespeichert wird, der später nicht nur weiterverwendet werden kann, sondern ggf. auch verändert werden kann. Eine Variable wird über ihren Namen angesprochen. Hier einige Beispiele:

var hallo;

Diese Variable hat zwar einen Namen und ein Speicherplatz wurde reserviert, aber bislang ist noch nichts im Variablenplatz gespeichert.

var hallo; hallo="Ciao";

damit wurde der Variablen hallo der Wert Ciao zugewiesen.

Dies wäre auch auf einmal gegangen (d.h. wir "initialisieren" die Variable gleich bei deren Erstellung):
var hallo="Ciao";

Unserer Variable hallo hätte aber auch andere Werte haben können, z.B.

var hallo=25; (eine Zahl steht ohne Anführungszeichen. Stünde sie in Anführungszeichen, würde sie wie ein Textteil behandelt, man könnte mit ihr also keine Berechnungen durchführen).

var hallo=true; (auch Wahrheitswerte stehen nicht in Anführungszeichen, ansonsten würden sie ebenfalls als Text fehlinterpretiert); zu Wahrheitswerten s.u.

Sie können auch mehrere Variablen in einer Zeile definieren, dabei können bereits Werte zugewiesen werden oder auch nicht:

var a, b=25, c, hallo="ciao", rest;

hier wurden fünf Variablen definiert, zwei davon wurden gleich mit Werten versehen.

Hinweis: Variablen können auch ohne das Schlüsselwort var definiert werden. Die Verwendung von var macht aber den Code deutlich übersichtlicher. Statt var hallo="Ciao"; hätte auch genügt hallo="Ciao"; manchmal werden auch sog. globale Variablen (die vor etwaigen Funktionen im Skript stehen und somit von verschiedenen Funktionen verwendet werden können ohne var definiert, während lokale Variablen, die innerhalb einer Funktion stehen, mit var definiert werden. Ich empfehle aber aus Übersichtsgründen die generelle Kennzeichnung von Variablen durch das Schlüsselwort var.

Änderung von Variablen-Werten

Die Werte von Variablen können jederzeit geändert werden (daher der Name Variable), z.B.:

var hallo="Ciao"; hallo="tschüß" hallo=20 hallo=20+5

Zu Beginn wird die Variable hallo definiert und gleich mit dem Wert Ciao belegt. Danach wird die Variable hallo mit dem neuen Wert tschüß belegt, danach mit der Zahl 20, danach mit der (errechneten) Zahl 25.
Es macht natürlich keinen Sinn, dies so im Code direkt untereinander zu ändern. Es könnte aber sinnvoll sein, dass bei Aufruf eines Dokuments die Variable hallo mit dem Wert Ciao benötigt wird (z.B. als Ausgabe mit der Methode window.document.writeln(hallo). Bei Verlassen der Seite könnte aber JavaScript in einer Funktion der Wert auf tschüß gesetzt werden und ein HinweisFenster aufgerufen werden, also z.B. so: (z.B. function halloaendern() {hallo="tschuess"; alert(hallo)}.
Variablen können das Leben beim Programmieren sehr erleichtern, auch wenn dies in diesem Beispiel noch nicht so klar wird. Spannend wird es insbesondere dann, wenn Variablen-Werte durch Benutzereingaben oder Benutzerspezifika (z.B. Bildschirmbreite oder Browsertyp des Benutzers) definiert bzw. ggf. ausgetauscht werden.

Beispiel :

function eingabe() { var name; name=prompt ("Ihr Name?"); window.document.writeln("Hallo " + name + ", viel Spass auf meiner Homepage"); window.document.writeln("<p><a href='testseite.html'>hier geht's los</a></p>"); }

Das ganze wird mit dem onload-Handler gestartet.

Beispiel: Hier ist das Ergebnis.

Weitere Beispiele zu Variablen finden Sie auf der nachfolgenden kommentierten Beispielseite (7.3.3) sowie unten beim Stichwort Schleifen.

Schleifen

Einen Schleifentyp haben wir bereits in unserem fiktiven "FahrzeugScript" kennengelernt, das ist die if-Abfrage. Sie lautet vom Prinzip her:
if (Bedingung) { Ausführung }

Anstelle von Bedingung und Ausführung muss natürlich JavaScript-Code stehen.

Sie kann auch verschachtelt werden:

if (Bedingung1) {   if (Bedingung2)    {     Ausführung    } }

Nur wenn sowohl Bedingung 1 und Bedingung 2 erfüllt sind, erfolgt die Ausführung, ansonsten passiert gar nichts.

Obiges hätte man mithilfe des logischen Operators und einfacher auch folgendermaßen schreiben können:

if (Bedingung1 && Bedingung2) { Ausführung }

Man kann if-Abfrage mit else erweitern:

if (Bedingung) { Ausführung A break; } else { Ausführung B }

Hier wurde nach der ersten Ausführung das Schlüsselwort break; eingefügt. Dies ist bei if-Abfragen nicht grundsätzlich notwendig; es verhindert jedoch, dass der Abfrage-Code weiter abgearbeitet wird, sofern die Bedingung eingetreten ist (d.h. wahr bzw. true ist).

Bei if-else-Abfragen werden Verschachtelungen oft sinnvoll:

if (Bedingung1) {   if (Bedingung2)    {     Ausführung A     break; } else    {     Ausführung B break; } else { Ausführung C}

Bedingungen können nur einen sog. Boolschen Wert haben, nämlich true oder false (siehe Operatoren). Beispiele hierzu werden wir später anführen.

Streng genommen ist die if-Abfrage keine Schleifen-Abfrage, sondern eine Bedingungs-Abfrage, die nur einmal abgearbeitet wird (d.h. nach durchlauf der letzten if Abfrage wurde entweder Ausführung A oder B oder C durchgeführt, danach geht es ggf. im Skript-Programm weiter, falls noch etwas weiteres definiert wurde.

Echte Schleifenabfragen sind while- und for-Schleifen. Hier wird ein Programmteil (nämlich die Schleife, so lange wiederholt, wie eine Bedingung gilt).

Syntax für while-Schleife:

while (Bedingung) { Ausführung }

Wenn die Bedingung eintritt, wird eine Endlosschleife ausgeführt, aus der man nicht mehr herauskommt. Das wäre gleichbedeutend mit einem Programmabsturz und kann so natürlich nicht sein. Damit muss die Bedingung sich natürlich während der Schleifenwiederholung "irgendwie" ändern, oder man muss auf andere Weise (d.h. mit break; die Schleife verlassen können.

Erläuterung:

while (20!=21) { Ausführung }

20 ist natürlich immer ungleich (!=) 21. Damit könnte man diese Schleife nie verlassen.

Wenn nach Ausführung break; folgen würde, könnten wir die Schleife verlassen, macht aber hier natürlich keinen Sinn (dann bräuchten wir ja gar keine).

Also muss die while-Bedingung eben veränderbar, d.h. variabel sein. Dazu brauchen wir Variablen.

Ein Beispiel zur while-Schleife:

<script language="JavaScript">  </script>

Das Skript wird z.B. via onload-Eventhandler im body tag aufgerufen: <body onload="passwort()">

Erläuterung des Skripts:

Von Ihnen vergebene function bzw. Variablennamen sind Blau dargestellt; von Ihnen eingegebene Textstrings sind Rot dargestellt.

Nach Definition der function passwort() wird eine Variable pw_eingabe eingerichtet.

die while-Schleife soll so lange laufen, solange die Variable pw_eingabe nicht dem Wort giraffe entspricht (!= bedeutet ungleich).

dann wird der von uns definierten Variablen pw_eingabe zum ersten Mal ein Wert zugeordnet. Dieser Wert entspricht dem Wert, den der Benutzer in das Dialog-Eingabefeld eingibt. Das Dialogfeld wird mit der Methode prompt (); aufgerufen, als String wird im Dialogfeld noch ein von uns verfasster Text ausgegeben, damit der Benutzer auch weiß, was er machen soll. Er tippt daraufhin in ein Eingabefeld etwas ein, was den Wert von prompt () und damit den Wert unserer Variablen pw_eingabe ergibt.

wenn die Eingabe (und damit der Wert unserer Variablen pw_eingabe) nicht dem Wort giraffe entspricht, wird die while-Schleife nochmals durchlaufen. Eine neue Eingabe verändert unserer Variable. Ist dieser Wert wieder nicht giraffe, sondern ein anderer, läuft die while Schleife erneut, bis irgendwann einmal der Wert giraffe eingegeben wird. Dann wird die while-Schleife verlassen und die Methode open() des Objekts window durchgeführt. Hierbei ist der Wert testseite.html, d.h. diese Seite wird aufgerufen.

Dies ist nur ein Beispiel für die Verwendung von while-Schleifen mit Variablen. Natürlich wäre das Passwort jederzeit durch Blick in den Quellcode erkenntlich. Ein guter Passwort-Schutz ist dies natürlich nicht. Wir werden aber noch bessere, mit JavaScript programmierbare Passwort-Abfragen kennenlernen. Eine gewisse Schutzmöglichkeit besteht aber darin, das Skript auszulagern (s.u.).

Weiteres Problem. Wenn der Benutzer das Passwort nicht kennt, kann er die Abfrage nicht mehr verlassen. Auch Klick auf Abbrechen bringt die Aussage Falsches Passwort und damit die Wiederholung der Schleife. Sie müssen also wirklich giraffe (kleingeschrieben) eintippen, um wieder aus der Schleife herauszukommen. Eine Lösung finden Sie untenstehend.

Schleifenbeispiel 1:
Hier die Umsetzung unseres Beispiels

Schleifenbeispiel 2:
Und hier die notwendige Änderung, damit Klicken auf Abbruch wirklich auch einen Abbruch der Schleife bedeutet (sehen Sie sich den Quellcode isowie die dort eingefügten Erläuterungen dazu im Beispiel an)

WICHTIG: Auslagerung von JavaScripten in externe Dateien: JavaScripte können auch in externe Dateien ausgelagert werden und über den Head-Teil eingeladen werden. Das ist vergleichbar mit externen StyleSheets (siehe Modul 6).

Vorgehen:

Speichern Sie Ihr Skript in eine externe Textdatei. Dort steht das komplette Skript mit Ausnahme der Skript-Tags. Speichern Sie unter einem beliebigen Namen mit der Dateiendung .js , also z.B. zugang.js

Im html-Dokument, in welches das Skript eingelesen werden soll, schreiben Sie: <script language="JavaScript" src="zugang.js"></script> (wenn nötig, schreiben Sie auch die Versionsnummer von JavaScript, also z.B. <script language="JavaScript1.3" src="zugang.js"></script>

Das war's. Beim Aufruf des html-Dokuments wird das JavaScript in den Browsercache eingelesen und steht zum Abruf bereit.

Sie können auch mehrere externe Skripte einlesen. Dann müssen im Head-Teil eben mehrere der obigen Einleseanweisungen <script .... src="scriptname.js"></script> stehen.

Sie können auch kombinieren, d.h. externe Skripte einlesen und interne Skripte verwenden.

Die Skripte werden nach der Reihenfolge im Header abgearbeitet. Beachten Sie deshalb die Reihenfolge.

Die Eventhandler müssen natürlich nach wie vor im html-Dokument stehen

Vorteile:

Ihr Seitencode wird übersichtlicher.

Skripte, die Sie auf mehreren verwenden, stehen "global" (d.h. für die gesamte Website) zur Verfügung und können überall nach Bedarf verwendet werden.

Sie können solche Skripte bei Bedarf "global" ändern, ohne dass Sie viele html-Seiten ändern müssen.

Die externen Skripte sind in vielen Browsern etwas besser geschützt, d.h. der source-code der .js-Dateien ist häufig nicht aufrufbar. Dies gilt z.B. für Netscape ab Version 4. Der Internet-Explorer stellt den source bei Aufruf leider dar (zumindest die meisten Versionen, z.T. unterschiedlich je nach Plattform). Netscape 6 für Mac bietet ebenfalls an, die Datei auf die Festplatte zu speichern. Selbst wenn die Skriptdateien nicht direkt anzeigbar sein sollten, befinden sie sich nach dem Aufruf im Cache des Browsers und können dort mit einem Trick selbst bei Netscape angezeigt werden. Kennen Sie den Trick? Nachdem die Seite mit dem extern eingelesenen Skript geladen ist, geben Sie in die Adresszeile des Browsers about:cache ein. Sie erhalten dann ein Verzeichnis der Dateien, die im Cache sind. Sie können die externe js-Datei dann anklicken und erhalten den Source-Code. Im Internet-Explorer unter Windows werden Cache-Dateien im Verzeichnis c:\windows\Temporary Internet Files abgelegt. Echt geschützt sind externe Dateien also nicht, aber "Otto Normaluser" kommt vielleicht nicht direkt ran.

Hier nun obiges Schleifenbeispiel 2 in einer Version mit ausgelagertem Skript:

Beispiel mit ausgelagertem Skript: Hier ist das Ergebnis.

for-Schleifen:
In if-Schleifen wird eine Bedingung nur einmal geprüft, while-Schleifen werden so lange durchlaufen, bis die Bedingung falsch ist. for-Schleifen sind etwas komplexer. Hier erstreckt sich die Bedingung über eine bestimmte "Toleranz" bzw. Laufzeit. Solange man innerhalb dieser Rahmenbedingungen liegt, wird die Schleife wiederholt und Ausführungen getätigt, über- oder unterschreitet man die Rahmenbedingungen, verlässt man die Schleife. Die for-Schleife ändert jedoch die Bedingungen selbständig bei jeder Ausführung, so dass man nach einiger Zeit die Laufzeit-Rahmenbedingungen verlässt. Man definiert in einer for-Schleife also quasi eine Startbedingung, eine Laufzeitbedingung (die die Endbedingung beinhaltet) sowie die Schrittweite der Änderung der Startbedingung hin zur Endbedingung. Klingt komplizierter als es ist, aber man benötigt dazu natürlich wiederum eine Variable.

Allgemein:

for (Startbedingung; Laufzeit-/Endbedingung; Schrittweite) { Ausführung }

Beispiel:

<head> <title>for-Schleifenbeispiel</title> <script language="JavaScript">  </script> </head> <body bgcolor="#ffffff" onload="countdown()"> .....

Hier definieren wir erst einmal die function countdown sowie eine Variable zahl (noch ohne Wertzuweisung).

Dann beginnt die for-Schleife: als Startbedingung wird der Variablen zahl der Wert 10 (als Zahl, da nicht in Gänsefüßchen stehend) zugewiesen; als Laufzeitbedingung muss die Zahl größer gleich 1 sein (d.h. die Endbedingung ist 1), als Schrittweite wird die Variable zahl bei jedem Schleifendurchlauf um 1 verringert (mit dem arithmetischen Dekrement-Operator --)

Für jeden Durchlauf soll die Variable zahl gefolgt von einem Komma und einem Leerzeichen ins Dokument geschrieben werden. Dazu bedienen wir uns der Methode write (); des Unterobjekts document des Objekts window.

Nach dem letzten Durchlauf soll noch der Textstring "das war's" hinzugefügt werden.

Das Skript soll beim Laden aufgerufen werden, daher verwenden wir einen onload-Eventhandler im body-Tag.

Beispiel for-Schleife: Hier ist das Ergebnis

Die switch-case-Abfrage:

Dies ist eine Art if-else-Abfrage für besonders komplizierte Fälle, bei denen wir mit einer if-else-Abfrage sehr komplizierte Verschachtelungen basteln müssen. Sie läuft nach folgendem Muster ab:

var variablname; variablname=zuweisung (z.B. objekt.eigenschaft) switch (variablname)      {      case 'wert1 von variablname':           {           ausführungA           break;      }      case 'wert2 von variablname':           {           ausführungB           break;           }     default:          {          ausführungDefault          }      }

Hier wird also nicht eine true/false-Bedingung abgefragt, wie in der if-Abfrage, sondern direkt mit einem Variablenwert verglichen. Hat die Variable den wert1 wird Ausführung A gestartet, hat sie den wert2, Ausführung B. Es können beliebig viele cases angegeben werden. Trifft keiner dieser Fälle zu, wird Ausführung Default durchgeführt. Wichtig sind auch die Break-Angaben, damit die Abfrage beim Zutreffen eines cases verlassen werden kann und nicht der überflüssige Rest abgearbeitet wird.

Ein Beispiel (leicht verändert aus M.Seeboergers Buch )

<SCRIPT LANGUAGE="JavaScript"> var sprache; sprache=navigator.language;

switch (sprache)      {      case 'de':           {           window.open ("index_de.htm");           break;           }      case 'en':           {           window.open ("index_en.htm");           break;           }       case 'en-US':           {           window.open ("index_enus.htm");           break;           }       case 'fr':           {           window.open ("index_fr.htm");           break;           }      case 'it':           {           window.open ("index_it.htm");           break;           }      default:           {           window.open ("index_il.htm");           }      }</script>

Hinweise:

Dieses Skript wird ohne Eventhandler ausgeführt, da es nicht innerhalb einer function gestaltet ist.

Zur Definition der Variablen für den case-Vergleich wird die Eigenschaft language des navigator-Objektes verwendet. Die jeweilige Werteausgabe für die language Eigenschaft ist 'de', 'en', 'fr', 'it' etc. (jeweils ohne Gänsefüßchen)

Leider kennt nur Netscape ab Version 4 die language-Eigenschaft des Navigators. Um das Skript auch für Internet-Explorer durchführen zu lassen, wäre eine weitere Anpassung notwendig (siehe Level 3).

Anstelle der Variablenwerts navigator.language können Sie beliebig andere Variablenzuweisungen vornehmen. Wie wäre es z.B. mit

var browser=navigator.appName (werte z.B. 'Netscape' oder 'Microsoft Internet Explorer') oder

var bildschirm=screen.width oder

var passwoerter=prompt ("Ihr Passwort"), bei dem Sie je nach Passwort zu unterschiedlichen Seiten umleiten können.

Probieren Sie einfach ein bisschen. Wir werden später noch derartige Beispiele durchdiskutieren.

Hier nun obiges Beispiel (nur für Netscape)