4.5.6
Variablen und die Verwendung von Funktionen
Variablen sind ein elementares Thema für jeden Programmierer. Eine Variable ist eine Art Platzhalter für Werte.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Meine erste Test-Seite</title>
<script language="JavaScript1.2" type="text/javascript">
var meine_variable = "text ";
document.write(meine_variable);
meine_variable = "anderer Text ";
document.write(meine_variable);
</script>
</head>
<body>
</body>
</html>
Vergleichen Sie dieses Beispiel zunächst mit dem vorhergehenden. Da, wo vorher in Klammern eine Zeichenkette stand, findet sich nun meine_variable. Bitte beachten Sie, dass meine_variable nicht in Anführungszeichen steht - es ist also keine Zeichenkette gemeint, sondern etwas anderes.
Die Anweisung var meine_variable = "text "; definiert eine Variable. Unter dem Bezeichner "meine_variable" wird im Computer nun die Zeichenkette "text " gespeichert. Wenn der Browser nun später irgendwo im Code den Bezeichner findet (in diesem Fall direkt in der nächsten Zeile), dann wird der zum Bezeichner gehörende Wert anstelle des Bezeichners selbst eingesetzt. Das Schlüsselwort var ist nicht zwingend erforderlich. Es ist aber guter Stil, es bei der ersten Definition eines Variablennamens zu verwenden.
Variablen sind also Speicher für Werte, Zeichenketten etc. Wie die dritte und vierte Zeile des Beispiel-Codes zeigen, lassen sich Variablen auch ändern und dann wieder verwenden. Natürlich wäre es auch möglich, die Variable erneut zu verwenden, ohne sie vorher verändert zu haben.
Viele angehende Programmierer stellen die Frage, wozu Variablen denn überhaupt zu gebrauchen sind. Wie der Name verrät, sind Variablen variabel, also veränderlich. Sie können also Variablen einsetzen, ohne genau wissen zu müssen, was sich hinter einer Variable verbirgt. Das folgende Beispiel macht das deutlich:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Meine erste Test-Seite</title>
<script language="JavaScript1.2" type="text/javascript">
var meine_variable = prompt("Bitte etwas eingeben", "Hier Wert eingeben");
document.write("Es wurde eingegeben: ");
document.write(meine_variable);
</script>
</head>
<body>
</body>
</html>
Um das Beispiel verstehen zu können, müssen Sie zunächst noch die Funktionsweise der Funktion prompt kennen: ein Eingabefeld wird auf dem Bildschirm angezeigt. Wie man die Funktion aufruft, wird normalerweise in einem solchen Schema angegeben:
prompt(aufforderung, vorbelegung);
Das verrät Ihnen
- wie die Funktion heißt
- wie viele Parameter bzw. übergebene Werte die Funktion erwartet
- welchen Sinn die Parameter haben: Der erste gibt den Aufforderungs-Text an, der zweite die Vorbelegung des Eingabefeldes
Der Beispiel-Code zeigt recht anschaulich, dass auch Funktionen einen Rückgabewert haben können: Das, was der Anwender eingibt, wird in meine_variable gespeichert.
 Nach oben
|
4.5.7
Operatoren
Operatoren sind dafür zuständig, verschiedene Werte oder Variablen miteinander zu verknüpfen. Alle Operatoren liefern entweder einen Rückgabewert oder modifizieren eine der beteiligten Variablen. Der folgende Code zeigt Ihnen einige Operatoren:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Meine erste Test-Seite</title>
<script language="JavaScript1.2" type="text/javascript">
// Operatoren
// Das Script gibt nichts aus!
var s;
var a = 5;
var b = 6;
// Addition
s = 3 + 4;
s = a + b;
// Subtraktion
s = 3 - 2;
s = a - b;
// Multiplikation
s = 3 * 5;
s = a * b;
// Division
s = 6 / 3;
s = a / b;
// Zeichenketten verknüpfen
s = "Erster Teil, " + "zweiter Teil!";
</script>
</head>
<body>
</body>
</html>
Die Wirkungsweise der einzelnen Operatoren wird im Code durch Kommentare (eingeleitet durch ein //) erklärt. Nicht explizit erklärt ist der =-Operator: Er nimmt das, was auf der rechten Seite steht, und packt es in die Variable, die er zu seiner Linken findet.
Das Beispiel im nächsten Abschnitt zeigt einige Zahlenspielereien. Da dabei viele Operatoren verwendet werden, ist es sicherlich sinnvoll, den Code Zeile für Zeile durchzugehen.
|
|
Nach oben
|
4.5.8
Kontrollstrukturen, Vergleichsoperatoren, Schleifen
Sehen Sie sich diesen Code an:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Meine erste Test-Seite</title>
<script language="JavaScript1.2" type="text/javascript">
// Zahlen holen
var s = prompt("Bitte erste Zahl eingeben", 4);
var t = prompt("Bitte eine andere Zahl eingeben", 5);
// Was ist denn das?
if (s == t)
{
// Wenn s gleich t...
// Achtung: kein normales Gleichzeichen in der if-Anweisung...
alert("Die Zahlen mussten unterschiedlich sein. Nun ist es vorbei!");
}
else
{
// Wenn s ungleich t...
// Eine schöne Meldung:
alert("Cool! Zahlenspielereien beginnen!");
document.write("<b>Normale Zahlenspiele</b> <br><br>");
// Verwende verschiedene Operatoren: +, -, *
document.write("Zahl1 plus Zahl2: ");
document.write(s*1 + t*1); // Trick, damit die beiden Variablen nicht verkettet, sondern addiert werden
document.write("<br>");
document.write("Zahl1 mal Zahl2: ");
document.write(s*t);
document.write("<br>");
document.write("Zahl1 minus Zahl2: ");
document.write(s-t);
document.write("<br>");
document.write("<br><b>Die Schleife</b> <br><br>");
// Jetzt wird's komplizierter
// Gebe Zahl1-mal Zahl2 aus
// Wenn also Zahl1 gleich drei ist, wird dreimal der Wert von Zahl2 ausgegeben
for(var i =1; i <= s; i++)
{
// Verwendung des +-Operators zur Verkettung von einer Zeichenkette mit einer Zahl
document.write("Durchlauf "+i+"<br>");
document.write(t);
document.write("<br><br>");
}
}
</script>
</head>
<body>
</body>
</html>
4.5.8.1 Überblick
Was passiert in diesem Script? Der Anwender muss zwei ungleiche Zahlen eingeben, sonst bekommt er eine Fehlermeldung. Danach werden einige Operatoren in praktischen Beispielen gezeigt. Abschließend wird eine Zählschleife genutzt, um eine Zahl wiederholt auszugeben.
4.5.8.2 Die if-Anweisung
Die ausgegebene Fehlermeldung im Falle zweier gleicher Zahlen ist neu für uns. Im Detail funktioniert das so: Zunächst einmal werden zwei Zahlen vom Anwender eingegeben. Die nächste Zeile enthält eine bedingte Verzweigung: wenn s gleich t ist, erhält der Anwender eine Fehlermeldung.
Dafür setzen wir die if-Anweisung ein:
if (ausdruck)
{
// Wird ausgeführt, wenn ausdruck eine 1 zurückliefert
}
else
{
// Wird ausgeführt, wenn ausdruck eine 0 zurückliefert
}
4.5.8.3 Ausdrücke
ausdruck ist dabei der entscheidende Teil: Wenn ausdruck eine 1 zurückliefert, gilt der Ausdruck als "wahr". "wahr" ist der Ausdruck weiterhin, wenn er eine Zeichenkette oder eine beliebige Zahl ungleich 0 zurückliefert.
Nur: was sind Ausdrücke? Ein Ausdruck kann eine einfache Variable oder eine Zeichenkette/Zahl sein:
if ("abc")
{
// wird ausgeführt
}
if (1)
{
// wird ausgeführt
}
var a = "abc";
if ("abc")
{
// wird ausgeführt
}
4.5.8.4 Vergleichsoperatoren
Häufiger aber ist die Verwendung eines Vergleichsoperators wie ==. Der erwartet zwei Werte oder Variablen, eine links, eine rechts: "eins" == "zwei". Eine 1 wird dann zurückgegeben, wenn links gleich rechts ist.
Andere Operatoren sind > (größer), < (kleiner), <= (kleiner oder gleich) und >= (größer oder gleich).
4.5.8.5 Logische Operatoren
Nur: was ist, wenn Sie mehrere Bedingungen verknüpfen wollen? Dafür gibt es logische Operatoren: || (oder), && (und) und ! (Umkehr von 0 zu 1 und umgekehrt).
Beispiel: ((a > 10) && (b < 20)) liefert nur dann 1 zurück, wenn a größer als 10 ist und b kleiner als 20. ((!(a == 10)) || (b < 10)) dagegen liefert nur dann 1 zurück, wenn a ungleich 10 ist oder wenn b kleiner als 10 ist.
Eine Klammerung bietet sich hier übrigens an, um Eindeutigkeit zu gewährleisten. Ansonsten können einem leicht kleine Fehler unterlaufen, die aus der verschiedenen Priorität der Operatoren resultieren.
4.5.8.6 Schleifen
4.5.8.6.1 for
Im unteren Teil des Beispiels befand sich dieser Code:
for(var i =1; i <= s; i++)
{
// Verwendung des +-Operators zur Verkettung von einer Zeichenkette mit einer Zahl
document.write("Durchlauf "+i+"<br>");
document.write(t);
document.write("<br><br>");
}
Die for-Anweisung ist eine sogenannte Zählschleife. "Schleife" bezieht sich darauf, dass der in geschweiften Klammern stehende Code mehrmals ausgeführt werden kann.
Im Detail funktioniert for so: Zunächst wird eine Zählvariable deklariert und auf einen Startwert gesetzt. In unserem Beispiel wird i auf 1 gesetzt. Es folgt ein Strichpunkt, danach kommt ein Ausdruck. Solange der wahr ist, wird der Code im Inneren der Schleifenstruktur ausgeführt. Nach einem erneuten Semikolon folgt eine Anweisung, die bei jedem Durchlauf ausgeführt wird. i++ sorgt hier dafür, dass i um 1 erhöht wird.
4.5.8.6.2 while
Die while-Schleife ist einfacher:
while(a > b)
{
// Anweisungen...
}
Solange der Ausdruck in den Klammern wahr ist, wird der Code im Innern ausgeführt.
|
|
Nach oben
|
4.5.9
Eigene Funktionen
JavaScript erlaubt es, eigene Funktionen zu definieren:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Meine erste Test-Seite</title>
<script language="JavaScript1.2" type="text/javascript">
document.write(multipliziere(1,2,3));
function multipliziere(z1, z2, z3)
{
return z1*z2*z3;
}
</script>
</head>
<body>
</body>
</html>
Wenn Sie sich dieses Dokument im Browser ansehen, wird eine 6 ausgegeben.
multipliziere ist eine selbstdefinierte Funktion. Funktionsdefinitionen werden eingeleitet durch das Schlüsselwort function und den Funktionsnamen. In Klammern wird dahinter die Parameter-Liste angegeben: Sie vergeben Namen für Variablen, über die im Code der Funktion auf die übergebenen Werte zugegriffen werden kann. Wenn Sie keine Parameter benötigen, notieren Sie einfach eine leere Liste: ().
Der Code der Funktion muss von geschweiften Klammern umschlossen sein. Erlaubt ist dann alles, was auch sonst erlaubt ist - jede beliebige Anweisung darf innerhalb einer Funktion aufgerufen werden.
Wenn eine Funktion einen Wert zurückgeben soll, verwenden Sie den Befehl return.
|
|
Nach oben
|
4.5.10
Arrays
Folgendes Beispiel: Sie wollen die Farben von 10 Blumentöpfen speichern. Naheliegend wäre ein solcher Ansatz:
var topf1 = "rot";
var topf2 = "grün";
...
var topf10 = "ultraviolett";
Dieser Code würde zwar funktionieren, wäre aber unflexibel. Stellen Sie sich vor, Sie wollten die Farben aller Töpfe in einer Zeichenkette zusammensetzen:
topf1+topf2+topf3...
Wenn nun noch ein elfter Topf hinzukommt, müssen Sie praktisch Ihren gesamten Code umschreiben - lästig und unpraktisch.
JavaScript bietet Arrays an, auf Deutsch "Listen". Die sind darauf ausgelegt, eine Reihe von Daten zu speichern.
// Array definieren
var toepfe = new Array("rot", "grün", "ultraviolett");
// Array durchgehen und Einzelwerte ausgeben
for (var i = 0; i < toepfe.length; i++)
{
document.write(toepfe[i]);
}
// Einzelne Array-Elemente ändern
toepfe[1] = "wie Nudeln";
Zunächst also wird ein neues Array mit dem Befehl new Array (...) erzeugt. In Klammern stehen die in der Liste zu speichernden Werte.
Jetzt kann auf die einzelnen Listeneinträge mit einem Index zugegriffen werden, also mit einer Zahl, die genau angibt, welchen Eintrag man meint. Ein Index steht in eckigen Klammern. Der erste Listeneintrag hat den Index 0, der zweite den Index 1, der dritte den Index 2 etc.
Wer die Anzahl der Einträge eines Arrays herausfinden will, verwendet arrayname.length. In unserem Beispiel nutzen wir das, um alle Werte der Reihe nach durchzugehen.
Auf einzelne Elemente kann wie auf normale Variablen zugegriffen werden. Die letzte Zeile des Beispiels zeigt das.
|
Nach oben
|
4.5.11
Objekte in JavaScript
4.5.11.1 Grundsätzliches
Der Zugriff mit JavaScript auf zu verändernde HTML-Seiten basiert zu großen Teilen auf Objekthierarchien. Um diese Vorgänge zu verstehen, benötigen Sie ein wenig Grundwissen über objektorientierte Programmierung.
Eine einfache Definition: Ein Objekt ist ein Etwas, dem eigene Variablen und Funktionen zugeordnet sind. Weil man hier von Objekten redet, heißen Variablen "Eigenschaften" und Funktionen "Methoden".
Eine Klasse dagegen ist ein Bauplan für Objekte. Den Vorgang der Objekterstellung nennt man Instanzierung.
Wer ein Objekt erzeugen will, benötigt also zunächst einmal eine Klasse. Mit Hilfe der Klasse wird dann ein neues Objekt zusammengebaut. Dieser Vorgang lässt sich beliebig oft wiederholen, die dabei entstehenden Objekte sind zunächst einmal voneinander unabhängig.
Welche Vorteile bietet das Objekt-Konzept? Der Programmierer kann mit Objekten sehr realitätsorientiert arbeiten. Wer Schiffe simulieren will, verwendet einfach eine Klasse namens "Schiff" mit verschiedenen Eigenschaften. Viel schmutzige Arbeit wird dann direkt vom JavaScript-Interpreter erledigt, der Code wird selbsterklärend. So ist die Anweisung mein_schiff.kurs_setzen("holland") wirklich leicht zu verstehen.
Weiterhin erleichtern Objekte die Trennung von Schnittstelle und Implementation. Das klassische objektorientierte Dogma schreibt vor, dass Objekte nur ihre Bedienschnittstelle (Methoden) nach außen zugänglich machen. Wer das Objekt verwenden will, soll keinen Zugriff auf interne Arbeitsweisen und Datenspeicher des Objekts haben.
Ein Beispiel hilft oft, sich die Vorteile von OOP (objektorientierter Programmierung) klar zu machen. Nehmen wir an, wir wären in einer großen Firma tätig, die gerade ein 3D-Computerspiel herstellt. Wir greifen über Objekte auf Methoden zur Grafikdarstellung zu (folgenden Code funktioniert natürlich nicht in einem Browser):
screen.setPixel(x,y,farbe);
Die für das screen-Objekt zuständige Abteilung kann das Objekt intern ändern, wie sie möchte. Beispielsweise kann sie die komplette Prozedur zum Zeichnen eines Bildpunktes umschreiben. Alle anderen Abteilungen braucht das aber nicht zu interessieren, da der Bildschirm über die screen-Klasse gekapselt ist. Solange die Methode setPixel existiert, muss kein bisschen Code geändert werden.
4.5.11.2 Objekte in JavaScript
JavaScript stellt von sich aus viele Objekte zur Interaktion mit dem Browser bereit. Diese Objekte existieren einfach, müssen also nicht von Ihnen erzeugt werden.
So haben wir z.B. die ganze Zeit munter die Funktion document.write verwendet. In Wahrheit war die Bezeichnung "Funktion" völlig falsch - es handelt sich um eine Methode des document-Objekts. Wie das Beispiel deutlich macht, werden Objektname und Methode/Eigenschaft durch einen Punkt getrennt.
4.5.11.3 Objekthierarchien
Wer JavaScript programmiert, wird häufiger auf Konstrukte wie document.Formular1.Land.value stoßen. Formular1 ist ein Objekt, das aber gleichzeitig eine Eigenschaft von document ist. Land wiederum ist eine Eigenschaft von Formular1.
4.5.11.4 Mehr OOP
Im Kapitel "JavaScript-Know-How" finden Sie weitere Informationen zum Thema JavaScript und OOP.
|
|
Nach oben
|
4.5.12
Fazit
Sie sollten nun fähig sein, eigene JavaScript-Programme zu schreiben, denn Sie beherrschen nun Variablen, Kontrollstrukturen, Operatoren und OOP. Was Ihnen nun noch fehlt, ist eine genaue Kenntnis der JavaScript-Objekthierarchie. Im Internet gibt es dazu viele gute Quellen.
Wenn Sie tiefer in die Materie einsteigen wollen, sollten Sie die Kapitel "JavaScript-Know-How" und "DHTML" lesen. Dort gehen wir auf Themen wie OOP, sich bewegende Objekte und viele weitere Anwendungsbeispiele ein.
|
|
Nach oben
| | |
![eBook-Project by AboutWebDesign.de [LOGO]](logo.jpg){kind=logo}