vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Woche 2

Tag 8

Variablen, Datentypen, Funktionen und Methoden

Effektives Programmieren in JavaScript setzt - wie bei jeder Programmier- oder Scriptsprache - voraus, dass man sich mit der Syntax der Sprache vertraut macht. Dies wiederum beinhaltet, dass elementare Bestandteile der Syntax wie

und noch einige andere Begriffe vertraut sind. Dieser Tagesabschnitt soll Ihnen darüber einen grundsätzlichen Überblick über Variablen und Datentypen sowie Funktionen bzw. Prozeduren und Methoden bieten.

Funktionen, Prozeduren und Methoden

Uns sind an einigen Stellen bereits Funktionen im Rahmen von diversen Beispielen begegnet. Bisher definieren wir Funktionen als Zusammenfassungen von einem1 oder mehreren Befehlen zu einem Block, der mit einem Bezeichner benannt wird. Wesentliche Gründe für das Verwenden von Funktionen sind folgende:

Die Definition von Funktionen erfolgt, indem das dafür in JavaScript vorgesehene Schlüsselwort function die Definition einleitet, dann der Bezeichner der Funktion folgt und abschließend ein Klammernpaar notiert wird, in dem eventuell benötigte Parameter an die Funktion weitergegeben werden können. Solche Parameter sind Werte, die dann innerhalb der Funktion verwendet werden können. Dies sind dann Variablen, die in der Funktion lokal verwendet werden können (siehe dazu etwas weiter unten bei lokalen Variablen). Anschließend folgt der Block mit den enthaltenen Anweisungen - ohne (!) dass vorher ein Semikolon steht. Dies sieht schematisch also so aus:

function [Funktionsbezeichner]([optionale Parameter])
{
  ...irgendwelche Anweisungen
}

Der Aufruf erfolgt an einer beliebigen Stelle im Script (auch innerhalb einer anderen Funktion) oder über einen Eventhandler in HTML (das ist so was wie onLoad oder onClick, was wir schon benutzt haben). Wenn im Script selbst eine Funktion aufgerufen wird, muss sie mit dem Bezeichner, den Klammern, eventuell notwendigen Übergabewerten und einem abschließenden Semikolon notiert werden.

Der am häufigsten gemachte Fehler im Umgang mit Funktionen ist das Vergessen von Klammern. Einer Funktion (und einer Methode - s.u.) muss so gut wie immer (!!) ein Klammerpaar hinter dem Bezeichner stehen haben (die wenigen Sondersituationen, wo dies unterbleiben kann, treten so selten auf, dass man deswegen nicht auf die nachdrücklichste Betonung von »immer« verzichten sollte). Ob da etwas drin steht oder nicht, ist egal. Dabei muss die öffnende Klammer ohne Leerzeichen dem Bezeichner folgen. Es gibt zwar Sprachen wie VBScript oder auch Visual Basic, die das Prozedere mit den Klammern nicht so streng handhaben. Obwohl es auf den ersten Blick als eine Erleichterung erscheint, erhöht es die Fehlergefahr exorbitant, erschwert die Fehlersuche und reduziert die Wartbarkeit. Seien Sie froh, dass JavaScript da ziemlich pingelig ist.

Der Name einer Funktion ist relativ frei wählbar. Nur folgende Regeln dürfen nicht verletzt werden:

  1. Das erste Zeichen eines Bezeichners muss ein Buchstabe oder der Unterstrich _ sein.
  2. Es darf keines der in JavaScript gültigen Schlüsselworte als Bezeichner verwendet werden.
  3. Ein Bezeichner darf keine Leerzeichen enthalten.

Ob nun ein Bezeichner aus Groß- oder Kleinbuchstaben besteht oder man diese mischt, das ist erst mal egal (es sei dann, Sie werden von Projektrichtlinien zu einer bestimmten Notation gezwungen). Wenn Sie allerdings bei der Deklaration eine bestimmte Schreibweise gewählt haben, muss diese konsequent bei jedem Aufruf so geschrieben werden. Man kann es nicht oft genug betonen - JavaScript unterscheidet Groß- und Kleinbuchstaben. Es haben sich bezüglich der Schreibweise von Bezeichnern in der Praxis einige sinnvolle Regeln etabliert. Diese sind nicht verbindlich, aber wie gesagt sinnvoll (insbesondere in Bezug auf die Übersichtlichkeit und spätere Wartung):

Beispiel 1:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function eins()
{
alert("Eins");
}
function zwei()
{
alert("Zwei");
}
function drei()
{
alert("Vier?");
}
function lade()
{
eins();
zwei();
drei();
}
</SCRIPT>
</HEAD>
<BODY onLoad="lade()">
</BODY>
</HTML>

Das Beispiel (der Dateiname soll funktion1.htm sein) definiert vier Funktionen ohne Übergabeparameter. Nur die Funktion lade() wird beim Laden der Seite aufgerufen. Diese wiederum lädt nacheinander die anderen drei Funktionen über die Angabe ihres Bezeichners, der leeren Klammern und eines abschließenden Semikolons.

Abbildung 8.1:  Der Aufruf der Funktion drei()

Abbildung 8.2:  Der Aufruf der Funktion zwei()

Abbildung 8.3:  Der Aufruf der Funktion eins()

Rückgabewerte

Eine Funktion kann nun am Ende ihrer Arbeit ein Ergebnis zurückgeben. Etwa wenn Sie eine Funktion geschrieben haben, die zwei Zahlen addiert und dann die Summe als Ergebnis liefert. Das wird in JavaScript darüber geregelt, dass das Schlüsselwort

return

gefolgt von dem Ergebnis notiert wird.

Das hat noch den zusätzlichen Effekt, dass an dieser Stelle die Abarbeitung der Funktion abgebrochen und in die Zeile hinter dem Funktionsaufruf zurückgesprungen wird. Die Anweisung return steht entweder am Ende der Funktion oder innerhalb einer Kontrollfluss-Struktur, sodass unter gewissen Umständen die Funktion abgebrochen wird, in einer anderen Situation aber weiter abgearbeitet werden kann. Mit einer solchen Kontrollfluss-Struktur und der Anweisung return kann sehr flexibel auf Konstellationen reagiert werden. Eine Funktion mit Rückgabewert sieht schematisch also so aus:

function [Funktionsbezeichner]([optionale Parameter])
{
  ...irgendwelche Anweisungen
  return [Rückgabewert];
}

Die Verwendung des Rückgabewertes kann innerhalb der Bedingung einer Kontrollstruktur verwendet (das werden wir an späteren Tagen noch sehen) oder einer Variablen zugewiesen werden. Es ist auch möglich, den Aufruf der Funktion dort zu notieren, wo ein dem Rückgabewert entsprechender Wert oder eine adäquate Variable stehen könnte.

Beispiel 2:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function addiert()
{
return (2 + 2);
}
function lade()
{
alert(addiert());
}
</SCRIPT>
</HEAD>
<BODY onLoad="lade()">
</BODY>
</HTML>

Das Beispiel (der Dateiname soll funktion2.htm sein) definiert zwei Funktionen ohne Übergabeparameter. Wieder wird nur die Funktion lade()beim Laden der Seite aufgerufen. Diese wiederum gibt mit alert() eine Meldung aus. Was aber ausgegeben wird, ist der Rückgabewert der Funktion addiert(), die dort anstelle eines konkreten Wertes steht und ausgeführt wird.

Abbildung 8.4:  Die Rückgabe der Funktion lade()

Wenn nun eine Funktion keinen Rückgabewert zurückgibt, wird das in den meisten Programmiersprachen als Procedure oder - eingedeutscht - Prozedur bezeichnet (in der Regel auch bei der Deklaration von einem anderen Schlüsselwort wie eine Funktion eingeleitet). Von der Logik her bedeutet dies, dass bei Funktionen das Ergebnis einer Operation von Bedeutung sein sollte, während die Operation einer Prozedur Selbstzweck ist. JavaScript unterscheidet die beiden eng verwandten Techniken überhaupt nicht (unser erstes Beispiel wäre der Fall einer Prozedur gewesen, das zweite das einer echten Funktion). Damit verwischen die Unterschiede zwischen Funktionen und Prozeduren. Eine Funktion muss nicht mehr einen Rückgabewert liefern oder zumindest als »ohne Rückgabewert« definiert werden. Überhaupt behandelt JavaScript Funktionen sehr locker. Von der Syntax sehr streng strukturierte Sprachen verlangen, dass der Rückgabewert einer Funktion auch von der aufrufenden Stelle verwendet werden muss (!). Das bedeutet, ein Aufruf einer Funktion ist dort nur dann möglich, wenn der Rückgabewert einer Variablen zugewiesen oder sonstwie verwendet wird (etwa in Vergleichen einer Kontrollstruktur). JavaScript ist da weniger streng. Dies bedeutet, im zweiten Beispiel könnte auch die Funktion addiert() aufgerufen werden, ohne dass das Ergebnis 4 irgendwo in der Folge im Script zur Kenntnis genommen wird (auch wenn man sich dann fragen kann, wozu die Funktion aufgerufen wird - in anderen Fällen kann eine Funktion aber schon etwas Sinnvolles erledigt haben). Ein Verhalten, das den Umgang mit Funktionen erst einmal erleichtert. Aber wenn Sie sich erinnern, leite ich so immer Situationen ein, die dann auch einen Haken haben. So auch hier. Eine lockere Leine bei der Syntax erschwert immer die Suche von Fehlern, wenn etwas schiefgeht. Ebenso können viel leichter logische Probleme in Programmen auftreten. Eine weitere Gefahr ist, dass sich leicht ein unsauberer Programmierstil einschleicht. Aber es hilft nichts - Sie müssen JavaScript halt nehmen, wie es ist. JavaScript ist immer noch nicht so bedenklich wie VBScript, was da noch mehr Freiheiten lässt (und damit die Menge der potentiellen Probleme im Fehlerfall noch steigert). Es liegt auch viel am Programmierer selbst, inwieweit er die Freiheiten einer Sprache ausnutzt (missbraucht?) oder sich einen disziplinierten Programmierstil angewöhnt.

Wir werden bei den Variablen noch einige praktische Beispiele durchspielen, denn diese kann man erst in Verbindung damit sinnvoll programmieren. Dazu zählt etwa die Situation mit Übergabewerten.

Sowohl Funktionen als auch Prozeduren gibt es in streng objektorientierten Sprachen nicht. Dort übernimmt eine Technik deren Funktionalität, die wir schon einige Male angerissen haben - die so genannten Methoden. Dabei handelt es sich eigentlich nur um Funktionen oder Prozeduren, die ausschließlich über ihr zugehöriges Objekt verwendet werden können. Wir kennen da schon einige Fälle:

Wir trennen in diesem Buch von der Terminologie her nicht ganz so streng zwischen Funktionen und Methoden, obwohl es eigentlich ein bisschen schlampig ist. Nur - JavaScript (wie die meisten Scriptsprachen) stellt sowohl Funktionen (und streng genommen auch Prozeduren) als auch Objekte mit ihren Methoden bereit. Das bewirkt den hybriden (d.h. sowohl in Ansätzen objektorientierten als auch prozeduralen) Charakter der Sprache und erleichtert insbesondere Einsteigern und nicht mit der objektorientierten Denkweise vertrauten Programmierern am Anfang die Arbeit. Und - auch wenn Sie dieses ständige Miesmachen von Erleichterungen für Einsteiger nervt ;-) - macht größere Strukturen schlechter durchschaubar als bei strengerer Verfahrensweise.

JavaScript kennt einige vorgefertigte Funktionen. Wir werden die wichtigsten davon noch kennen lernen.

Variablen, Datentypen und Literale

Eine elementare Grundanforderung an eine Programmier- oder Scriptsprache sind Variablen. Aber was ist das genau? Wir haben Variablen bisher bereits mehrfach in Beispielen verwendet, aber sie sind quasi vom Himmel gefallen.

Variablen bezeichnen technisch gesehen Stellen im Hauptspeicher, in denen irgendwelche Werte temporär gespeichert werden können. Dazu haben sie einen Namen oder Bezeichner, der einigen Regeln in JavaScript genügen muss, und einen so genannten Datentyp.

Im Zusammenhang mit Variablen fällt oft der Begriff Literal. Ein Literal ist eine Darstellung eines eindeutig festgelegten und unveränderlichen Werts, etwa 42 oder 3.14 oder "Die Antwort ist". Ein Literal ist also das, was einer Variablen zugewiesen werden kann.

Die Regeln bezüglich des Namens einer Variablen sind in JavaScript sehr locker und entsprechen denen von Funktionen:

  1. Das erste Zeichen eines Variablenbezeichners muss ein Buchstabe oder der Unterstrich _ sein.
  2. Es darf keines der in JavaScript gültigen Schlüsselworte als Bezeichner verwendet werden.
  3. Ein Bezeichner darf keine Leerzeichen enthalten.

Grundsätzlich muss eine Variable vor ihrer ersten Verwendung deklariert, d.h. eingeführt oder im Script bekannt gemacht werden. Dies erfolgt in JavaScript allgemein mit folgender Syntax:

var [Variablenbezeichner];

Der Begriff var bezeichnet dabei ein JavaScript-Schlüsselwort, das die Deklaration der Variablen einleitet. Nun gehört JavaScript aber zu einem Typ von Sprachen, der als lose typisiert bezeichnet wird. Dies hat einmal zur Folge, dass eine Variable auch dann entstehen kann, wenn einem neuen Bezeichner einfach nur ein Wert zugewiesen wird (auch ohne das Schlüsselwort var voranzustellen). Dies hat extrem weitreichende Konsequenzen - positive, aber auch überaus negative.

Die positive Auswirkung ist, dass sich ein JavaScript-Programmierer wenig Gedanken um Variablen machen muss. Er kann einfach einen Begriff zu einer Variablen machen, indem dem Begriff ein Wert zugewiesen wird. Das bedeutet, dass Variablen nicht explizit deklariert werden müssen. Der Preis für so eine Bequemlichkeit (denn nicht mehr und nicht weniger ist das) ist aber hoch. Das wollen wir uns mit einem kleinen Beispiel deutlich machen.

Beispiel 3:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function lade()
{
var username;
userName = prompt(
"Bitte geben Sie Ihren Namen ein","");
document.write("<HTML>");
document.write("<BODY bgcolor=green text=yellow>");
document.write("<H1 align=center>Willkommen</H1>");
document.write("<P align=center>");
document.write(username);
document.write("</P>");
document.write("</BODY>");
document.write("</HTML>");
}
</SCRIPT>
</HEAD>
<BODY onLoad=lade()>
</BODY>
</HTML>

Erinnern Sie sich an das Beispiel? Wir hatten es am Tag 6 bereits in fast (!) gleicher Form. Speichern Sie den Text bitte unter dem Dateinamen var1.htm ab und schauen Sie sich die Datei im Browser an. Über prompt() wird beim Laden der Seite ein Benutzerdialog angezeigt, in dem der Besucher eine Eingabe vornehmen kann. Diese Eingabe wird in einer Variablen gespeichert und soll dann bei der dynamischen Erzeugung der Webseite verwendet werden. Was aber passiert wirklich?

Abbildung 8.5:  Der eingegebene Name wird nicht (!) in der Webseite verwendet

Abbildung 8.6:  Der Anwender gibt seinen Namen ein

Der eingegebene Name wird nicht in der Webseite verwendet. Statt dessen steht dort etwas von wegen undefiniert (undefined). Aber wo ist das Problem?

Die Variable username ist nicht (!) identisch mit userName. JavaScript unterscheidet Groß- und Kleinschreibung! Das sollten Sie mittlerweile wissen ;-). Aber es ist ein oft gemachter Leichtsinnsfehler - auch bei Profis. Die Konsequenzen sind aber in Verbindung mit dem Verhalten von JavaScript in Bezug auf Variablendeklarationen drastisch.

Die Zeile

var username;

legt eine Variable mit dem Namen an. Die nachfolgende Zeile

userName = prompt(
"Bitte geben Sie Ihren Namen ein","");

sollte von der Planung her dieser Variablen einen Wert zuweisen. Da aber userName ein neuer Bezeichner ist (für JavaScript so unterschiedlich, als ob dort Quasimodo stehen würde), erzeugt die Zeile eine neue Variable mit Namen userName. Insbesondere bleibt die Variable username ohne gültigen Wert - sie ist undefiniert. Die nachfolgende Ausgabe über

document.write(username);

kann also keinen sinnvollen Wert aus der Variablen entnehmen.

Der Preis für die nicht notwendige explizite Deklaration über das Schlüsselwort var ist also der, dass bei Tippfehlern ungewollt neue Variablen entstehen können und dafür Variablen, denen man eigentlich einen neuen Wert zuweisen wollte, diesen Wert nicht annehmen. Solche Fehler sind in komplexeren Scripten extrem tückisch aufzufinden.

Ein wenig wird die Situation durch eine Syntaxregel von JavaScript wieder entschärft. Jede Variable muss vor ihrer ersten Verwendung initialisiert werden, was dann oft im Fehlerfall auch eine sinnvolle Fehlermeldung bewirkt.

Initialisierung nennt man die Vorbelegung von Variablen mit einem Vorgabewert.

Diese Initialisierung einer Variablen unter JavaScript wird einfach mit einer Wertzuweisung durchgeführt, wie es in unserem Beispiel erfolgt ist. Es kann aber gelegentlich helfen zu erkennen, dass irgendwo eine neue Variable versehentlich eingeführt worden sein muss.

Wertzuweisung bedeutet, eine Variable bekommt irgendwie einen Wert zugeordnet. Eine Wertzuweisung erfolgt in der Regel so, dass auf der linken Seite eine Variable steht, dann das Gleichheitszeichen und dann auf der rechten Seite der Wert, eine Berechnung eines Wertes oder eine Funktion, die einen Rückgabewert liefert. Es gibt aber zahlreiche Feinheiten, die noch gesondert behandelt werden.

Grundsätzlich kann sowohl beim Anlegen einer Variablen als auch später im Laufe des Scriptablaufs ein Wert zugewiesen werden. Sehr oft wird einer Variablen bei der Deklaration auch gleich ein Defaultwert zur Vorbelegung zugewiesen. Dies erfolgt allgemein mit folgender Syntax:

var [Variablenbezeichner] = [Wert];

Der Wert einer Variablen zur Laufzeit wird einfach durch Zuweisung eines neuen Wertes über ein Gleichheitszeichen verändert. Dabei können auf der rechten Seite direkt Werte, aber auch Ausdrücke mit Wertrückgabe (Berechnungen, Funktionen etc.) stehen. Darauf kommen wir bei dem Abschnitt über Wertzuweisungen umfassend zurück.

Ein weiterer Begriff ist bei der Deklaration von Variablen gefallen - Datentypen. Ein Datentyp ist eine Angabe darüber, wie eine Variable (oder ein einfaches Objekt - für nähere Erläuterungen dazu haben wir aber derzeit noch nicht das Rüstzeug) im Rahmen einer Computersprache im Hauptspeicher des Computers dargestellt wird. Im Wesentlichen ist dies die Angabe, wie viele Bit dafür reserviert werden. Eine solche Angabe enthält normalerweise ebenfalls Hinweise darüber, welche Operationen bezüglich des dort gespeicherten Werts erlaubt sind und was bei einer Verknüpfung mit anderen Elementen passieren soll.

In JavaScript wird - wie in den meisten Scriptsprachen - bei der Deklaration einer Variablen nicht explizit ein Datentyp festgelegt. Eine Festlegung des Datentyps erfolgt implizit durch die Art von Wert, die der Variablen irgendwann zugewiesen wird. Bei einer erneuten Zuweisung mit einem andersartigen Wert verändert sich sogar der Datentyp der Variablen während der Laufzeit des Scripts. Die Datentypen werden also intern von JavaScript verwaltet.

Ein solcher Datentyp mit der Festlegung einer Anzahl von Bit hat die Konsequenz anzugeben, wie viele Zeichen in einer Variablen dieses Typs gespeichert werden können. Nehmen wir eine Variable, die einen Datentyp hat, der ein Byte (8 Bit) groß ist. In einem Byte können genau 2 hoch 8 = 256 verschiedene Zeichen oder Werte gespeichert werden. Dies können beispielsweise die Zahlen von 0 bis 255 sein. Auf jeden Fall ist die Anzahl der darstellbaren Zeichen durch die Länge des Datentyps beschränkt. Wenn größere Zahlen oder mehr Zeichen in der Variablen gespeichert werden sollen, kann dies nicht in einer Variablen dieses Datentyps geschehen - es ist einfach nicht genug Platz im Speicher dafür reserviert.

Jede Programmier- und Scriptsprache muss Variablen mit einem Datentyp versehen. Wie gesagt: es muss ja Hauptspeicher für aufzunehmende Werte reserviert werden. JavaScript besitzt vier Hauptdatentypen und zwei Sonderdatentypen, die aber wie gerade besprochen implizit verwaltet werden. Das explizite Verhalten der Datentypen wird für den Anwender weitgehend verdeckt erfolgen und die Plattform kümmert sich selbst um alle notwendigen Schritte. JavaScript unterstützt folgende vier Grundtypen von Variablen sowie die am Ende der Tabelle notierten Sonderdatentypen:

Typ

Beschreibung

Boolean

Boolean (oder auch Boolsche - nach dem Mathematiker George Boole) Werte sind Wahrheitswerte. Variablen dieses Typs können nur einen der beiden Werte true oder false (wahr oder falsch) annehmen. Solche Variablen werden im Rahmen von Vergleichen genutzt.

Number

Dieser Variablentyp kann eine Ganzzahl oder einen Gleitkommawert enthalten. Diese beiden Varianten sind streng genommen zwei Datentypen, denn offensichtlich braucht es zur Darstellung einer Gleitkommazahl mehr Platz im Hauptspeicher als für eine Ganzzahl (bei einer Gleitkommazahl muss ja sowohl der Ganzzahlanteil als auch der Nachkommateil gespeichert werden).

Kommazahlen werden in JavaScript anstelle eines Kommas mit einem Punkt getrennt. Neben der normalen Zahlenschreibweise gibt es die wissenschaftliche Notationsmöglichkeit über die Angaben e oder E. In diesem Fall wird der Potenzwert hinter dieser Expotentialkennzeichung notiert. In JavaScript können Variablen vom Typ Number nicht nur dezimal, sondern auch oktal (mit einer führenden 0 eingeleitet) oder hexadezimal (eingeleitet durch das Präfix 0x) angegeben werden.

Object

Dieser allgemeine Datentyp kann einen Wert eines beliebigen Typs enthalten. Er wird für das Speichern von Objekten verwendet.

String

Dieser Variablentyp steht für eine Zeichenkettenvariable und kann eine Reihe von alphanummerischen Zeichen enthalten (maximal 256 in einer Zeichenkette - bei Bedarf können aber mehrere Zeichenkette mit + verknüpft werden). Dabei können alphanummerische Zeichen auch maskiert werden. Insbesondere ist so etwas notwendig, wenn Zeichenkettenvariablen Sonderzeichen wie Hochkommata, Tabulatoren oder einen Zeilenumbruch enthalten sollen. Diese kann man nicht direkt eingeben, da sie in der Regel eine Steuerfunktion unter JavaScript oder im Editor haben. Sie müssen maskiert werden, was so ja auch aus HTML bekannt ist. Maskierte Zeichen werden in JavaScript durch das Zeichen \ eingeleitet, gefolgt von einem Buchstaben, der das Steuerzeichen beschreibt. Es gibt folgende Steuerzeichen:

Steuerzeichen Funktion

\n Zeilenumbruch (nur im Rahmen einer JavaScript-

Ausgabe zu verwenden, nicht in einer HTML-Seite.)

\f Wagenrücklauf

\b Backspace

\r DOS-Zeilenumbruch als Ergänzung von \n

\t Tabulator

\" Anführungszeichen

undefined

Der Datentyp beschreibt eine nichtdefinierte Situation. Eine Variable besitzt so lange diesen Wert, bis ihr nach dem Anlegen explizit ein Wert zugewiesen worden ist.

null

Dieser Sonderdatentyp beschreibt die Situation, wenn ein Objekt noch keinen Wert hat und entspricht »keiner Bedeutung« oder Null. Das ist durchaus ein sinnvoller Wert, der sich von einer leeren Zeichenkette oder der Zahl 0 unterscheidet. Der Datentyp null kann beispielsweise zurückgegeben werden, wenn in einem Dialogfenster mit Abbrechen-Schaltfläche diese betätigt wird.

Tabelle 8.1: Datentypen in JavaScript

Beispiel 4:

Wir testen nun verschiedene Variablendatentypen. Erstellen Sie die nachfolgende Datei:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function lade()
{
var abc = true;
var def = 123.45;
var hij = 42;
var klm = 5.123E2;
var nop = 5e-2;
var qrs = "Das ist ja doll";
var tuv = new Date();
var wxy = new Array();
var z = document;
document.write("<HTML>");
document.write("<BODY bgcolor=green text=yellow>");
document.write("<H1 align=center>Datentypen</H1>");
document.write("<P align=center>");
document.write("Variable abc hat den Wert ", abc);
document.write("<BR>");
document.write("Variable def hat den Wert ", def);
document.write("<BR>");
document.write("Variable hij hat den Wert ", hij);
document.write("<BR>");
document.write("Variable klm hat den Wert ", klm);
document.write("<BR>");
document.write("Variable nop hat den Wert ", nop);
document.write("<BR>");
document.write("Variable qrs hat den Wert ", qrs);
document.write("<BR>");
document.write("Variable tuv hat den Wert ", tuv);
document.write("<BR>");
document.write("Variable wxy hat den Wert ", wxy[0]);
document.write("<BR>");
document.write("Variable z hat den Wert ", z);
document.write("<BR>");
document.write("</BODY>");
document.write("</HTML>");
}
</SCRIPT>
</HEAD>
<BODY onLoad=lade()>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen Datentypen.htm ab und schauen Sie sich die Datei im Browser an.

Abbildung 8.7:  Daten in verschiedener Ausprägung

Da der String-Datentyp für bestimmte Situationen maskierte Zeichen beinhalten kann, werden wir das im nächsten Beispiel testen.

Beispiel 5:

Erstellen Sie die nachfolgende Datei:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function lade()
{
document.write("<HTML>");
document.write("<BODY bgcolor=green text=yellow>");
document.write("<H1 align=center>Datentypen</H1>");
document.write("<P align=center>");
alert(
"Hier ist die erste Zeile der Meldung. Dann folgt ein\nZeilenumbruch.");
alert("
Hier steht wieder Text. Dann folgt ein\tTabulator.");
document.write(
"\"Anführungszeichen kann man nicht direkt verwenden.\"");
document.write("<BR>");
document.write("</BODY>");
document.write("</HTML>");
}
</SCRIPT>
</HEAD>
<BODY onLoad=lade()>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen Datentypen2.htm ab und schauen Sie sich die Datei im Browser an.

Beachten Sie, dass der mit /n gesetzte Zeilenumbruch und auch der Tabulator sich nicht beim direkten Schreiben in eine Webseite auswirkt, sondern nur bei JavaScript-Ausgaben wie der alert()-Methode, die wir im Beispiel verwenden.

Abbildung 8.8:  Anführungszeichen können in die Webseite geschrieben werden

Abbildung 8.9:  Der Tabulator im Mitteilungsfenster

Abbildung 8.10:  Der Zeilenumbruch im Mitteilungsfenster

Casting

Texte sind keine Zahlen und Objekte keine Texte. Das soll erst mal als Aussage so stehen bleiben. Wenn nun in JavaScript die Regel gilt, dass Variablen nicht explizit bei der Deklaration einen Datentyp zugewiesen bekommen, sondern der Datentyp sich implizit durch die Zuweisung eines bestimmten Werts ergibt - was passiert, wenn eine Variable zuerst eine Zahl beinhaltet hat und ihr dann ein Text zugewiesen wird? Dass dies mehrere Schwierigkeiten aufwirft, können Sie bereits erahnen. Beispielsweise folgende:

Grundsätzlich ist bei solchen Situationen ein Vorgang notwendig, der Casting oder Typkonvertierung genannt wird. Dies bedeutet die Umwandlung von einem Datentyp in einen anderen. Prinzipiell unterscheidet man in der Programmierung zwei Arten von Konvertierungen:

Explizite Konvertierungen werden nur von sehr leistungsfähigen Programmiersprachen unterstützt (etwa Java). Bei expliziten Konvertierungen löst der Programmierer mittels einer dafür von der Programmiersprache bereitgestellten Syntax selbst eine Umwandlung in einen anderen Datentyp aus. JavaScript unterstützt solch explizites Konvertieren nicht, was auch schon deshalb logisch ist, weil ja schon bei der Deklaration gar kein Datentyp explizit angegeben wird. JavaScript verwendet Ad-hoc-Typkonvertierungen.

Es gibt allerdings in JavaScript einige Funktionen und Methoden, die indirekt eine explizite Typkonvertierung innerhalb enger Grenzen erlauben. Dies sind beispielweise parseInt() und parseFloat(), Number() sowie eval(). Wir kommen darauf an Tag 13 zurück.

Dabei werden bei der Auswertung von Ausdrücken, in denen Variablen oder Werte verschiedenen Datentyps miteinander verbunden werden, durch den Interpreter die eventuell notwendigen Typkonvertierungen automatisch durchgeführt.

Ad-hoc-Konvertierungen sind nicht ungefährlich. Und zwar in Bezug auf zwei Situationen. Es sollte nicht vorkommen, dass eine Konvertierung von einem Datentyp mit mehr Informationen in einen mit weniger Informationen automatisch durchgeführt wird. Was geschieht etwa mit dem Nachkommateil, wenn von einem Datentyp mit Nachkommastellen automatisch in einen Datentyp konvertiert wird, der nur Ganzzahlen aufnehmen kann? Oder was geschieht mit führenden Nullen bei einer als String gespeicherten Telefonnummer, wenn daraus eine Zahl wird? Je nach Strenge einer Sprache geschehen automatische Konvertierungen deshalb nur innerhalb sehr enger Grenzen. Java ist beispielsweise eine extrem strenge Sprache, wo eine automatische Konvertierung nur dann stattfindet, wenn keine Informationen verloren gehen können.

Bei JavaScript wird das Verfahren etwas lockerer gehandhabt. Wenn die übrige Syntax darauf schließen lässt, dass die Konvertierung sinnvoll ist, wird sie meist so sinnvoll wie möglich durchgeführt. Dennoch - es können unter Umständen Informationen verloren gehen (etwa bei besagter Konvertierung von einer als String gespeicherten Telefonnummer in eine Zahl - siehe Beispiel).

Das zweite Problem ist, dass automatische Typkonvertierungen auch dann stattfinden können, wenn es eigentlich nicht sinnvoll ist (oder eventuell auch unterbleiben, obwohl sie gewünscht werden). Auch dazu werden wir Beispiele durchspielen.

Die folgenden Beispiele demonstrieren verschiedene Typkonvertierungen und einige potentiellen Probleme damit.

Beispiel 6:

Erstellen Sie die nachfolgende Datei:

<html>
<body>
<SCRIPT LANGUAGE="JavaScript">
var a;
var b;
a = prompt("Geben Sie die erste Zahl ein","");
b = prompt("Geben Sie die zweite Zahl","");
document.write(
"Das Ergebnis von ", a, " + ", b, " ist : ");
document.write(a + b);
document.write("<br>");
</SCRIPT>
</body>
</html>

Speichern Sie den Text bitte unter dem Dateinamen Add1.htm ab und schauen Sie sich die Datei im Browser an. Sie müssen nacheinander zwei Zahlen eingeben, die dann addiert werden. Das macht die Zeile

document.write(a + b);

Aber was wird wirklich ausgegeben?

Abbildung 8.11:  Seit wann ist  6 + 6 = 66?

Die beiden Eingaben werden nicht nummerisch addiert, sondern als Texte zusammengesetzt. Grund dafür ist, dass die Anwendereingaben von der prompt()-Methode als Strings zurückgegeben werden. Strings können aber mit dem +-Operator verbunden werden. Es wird einfach Zeichen für Zeichen aneinander gehängt. Das Verfahren haben wir uns schon mehrfach bei Beispielen zunutze gemacht. Hier aber ist uns dieses Verhalten im Weg. Mit dem nachfolgenden Trick können wir JavaScript zwingen, die automatische Konvertierung vor der Verbindung mit dem +- Operator auszuführen und die Benutzereingaben in Zahlen umzuwandeln. Die Zeile

document.write(a + b);

wird dabei durch

document.write(a*1 + b*1);

ersetzt. Die Multiplikation mit eins verändert nicht den Wert einer nummerischen Eingabe, erzwingt aber die Ad-hoc-Typkonvertierung (ein String, der nur Zahlen beinhaltet und mit einer Zahl multipliziert wird, wird zu einer Zahl). Beachten Sie, dass wir Punkt-vor-Strich-Rechnung ausnutzen. Testen wir diese Verhaltensweise nun mit dem bereits angedeuteten Verhalten an einer Zahl mit führenden Nullen, wo durch bestimmte Situationen diese Informationen verschwinden können.

Beispiel 7:

Erstellen Sie die nachfolgende Datei:

<html>
<body>
<SCRIPT LANGUAGE="JavaScript">
var a, b;
a = prompt(
"Geben Sie die Telefonnummer mit Vorwahl ein","");
b = a*1;
document.write("Die Telefonnummer ist ", a);
document.write("<br>");
document.write(
"Die Telefonnummer multipliziert mit 1 ist ", b);
document.write("<br>");
</SCRIPT>
</body>
</html>

Speichern Sie den Text bitte unter dem Dateinamen Telefon.htm ab und schauen Sie sich die Datei im Browser an. Wenn Sie eine Telefonnummer mit führenden Nullen eingeben, wird diese Information bei der zweiten Zeile der Ausgabe nicht mehr zur Verfügung stehen.

Abbildung 8.12:  Informationsverlust

Obwohl das Beispiel sehr konstruiert ist, kann eine solche Situation durchaus in der Praxis auftreten.

Nehmen wir uns nun noch ein Beispiel vor, in dem ein und derselben Variablen nacheinander Werte verschiedener Datentypen zugewiesen werden.

Beispiel 8:

Erstellen Sie die nachfolgende Datei:

<html>
<body>
<SCRIPT language="JavaScript">
var a;
a = 1;
document.write("Wert von a: ", a);
document.write("<br>");
a = 1.2345;
document.write("Wert von a: ", a);
document.write("<br>");
a = "Gude wie"2;
document.write("Wert von a: ", a);
document.write("<br>");
a = new Date();
document.write("Wert von a: ", a);
document.write("<br>");
a = true;
document.write("Wert von a: ", a);
document.write("<br>");
</SCRIPT>
</body>
</html>

Speichern Sie den Text bitte unter dem Dateinamen einevar.htm ab und schauen Sie sich die Datei im Browser an. Die Variable nimmt jegliche Werte auf - gleich welchen Datentyps.

Abbildung 8.13:  Eine für alles

Nehmen wir uns nun noch ein Beispiel vor, in dem über bestimmte Operationen Variablen miteinander verbunden werden, und verfolgen wir, was dann passiert.

Beispiel 9:

Erstellen Sie die nachfolgende Datei:

<html>
<body>
<SCRIPT language="JavaScript">
var a = 42;
var b = 3.14;
var meinText1 = "Am Brunnen vor "
var meinText2 = "dem Tore."
document.write("Wert von a + b : ", a + b );
document.write("<br>");
document.write("Wert von meinText1 + meinText2 : ",
meinText1 + meinText2);
document.write("<br>");
document.write("Wert von a - b :", a - b );
document.write("<br>");
document.write("Wert von meinText1 - meinText2 : ",
meinText1 - meinText2);
document.write("<br>");
document.write("Wert von a * b :", a * b );
document.write("<br>");
document.write("Wert von meinText1 * meinText2 : ",
meinText1 * meinText2);
document.write("<br>");
document.write("Wert von a / b :", a / b );
document.write("<br>");
document.write("Wert von meinText1 / meinText2 : ",
meinText1 / meinText2);
document.write("<br>");
document.write("Wert von meinText1 + a : ",
meinText1 + a);
document.write("<br>");
document.write("Wert von meinText1 - a : ",
meinText1 - a);
document.write("<br>");
document.write("Wert von meinText1 * a : ",
meinText1 * a);
document.write("<br>");
document.write("Wert von meinText1 / a : ",
meinText1 / a);
document.write("<br>");
</SCRIPT>
</body>
</html>

Speichern Sie den Text bitte unter dem Dateinamen Datentypen3.htm ab und schauen Sie sich die Datei im Browser an. Sie haben sicherlich gleich vermutet, dass bei dem Beispiel einige Operationen nicht funktionieren. Das ist immer dann der Fall, wenn der Wert NaN (Not a Number) als Ergebnis herauskommt. Dies ist übrigens ein wohldefinierter Wert, den man sinnvoll nutzen kann, wie wir noch sehen werden.

Abbildung 8.14:  Manches geht, aber nicht alles

In dem Beispiel werden vier Variablen verknüpft. Es gibt eine Ganzzahl, eine Gleitkommazahl und zwei Strings. Die beiden Zahlen lassen sich ohne wesentliche Probleme miteinander verknüpfen. Es findet jedoch insoweit immer eine Typkonvertierung statt, als dass als Ergebnis immer eine Gleitkommazahl herauskommt (also ein Datentyp, der mehr Platz im Speicher braucht - sowohl für den Vorkommateil als auch den Nachkommateil). Dies ist zwingend, damit keine Information verloren geht. Nur wenn zwei Ganzzahlen miteinander verknüpft würden, würde wieder eine Ganzzahl herauskommen.

Die beiden Texte lassen sich nur so miteinander verbinden, dass die Zeichen mit + einfach aneinander gehängt werden. Alle anderen Verbindungen machen keinen Sinn. Auch Text und Zahl lassen sich nur mit dem +-Operator in dem Sinn miteinander verbinden, dass die Zahl zuerst automatisch in einen String konvertiert und dann einfach angehängt wird.

Variablenvarianten

Bei Variablen unterscheidet man von der Konzeption verschiedene Arten, wobei der Ort, wo sie vorhanden sind, die Variante bestimmt. Grundsätzlich gibt es:

Das Thema Klassenvariablen wollen wir nicht weiter verfolgen. Nur soweit eine kleine Erklärung: Im Rahmen der objektorientierten Programmierung werden ähnliche Objekte zusammengefasst, um eine leichtere Klassifizierung von diesen Objekten zu ermöglichen. Die Eigenschaften der Objekte werden in übergeordneten Gruppierungen - den so genannten Klassen oder Objektdeklarationen - als eine Gruppe zusammenhängender Informationen und Methoden gesammelt und für eine spätere Erzeugung von realen Objekten verwendet. Klassen können allgemein als die Bauvorschriften von Objekten verstanden werden. Klassenvariablen sind solche Variablen, die innerhalb einer Klasse definiert werden und in allen Instanzen der Klasse (den konkreten Objekten) zur Verfügung stehen. Wir werden auf dieses Thema am Tag 15 genauer eingehen.

Instanzvariablen

Eine Instanz einer Klasse bzw. einer Objektdeklaration ist ein anderer Begriff für das aus der Klasse erzeugte Objekt. Man kann beide Begriffe synonym verwenden, nur benutzt man Instanz meist dann, wenn man noch einen deutlichen Hinweis auf die erzeugende Klasse bzw. Objektdeklaration mit einschließen will. Man redet also beispielsweise von dem Array-Objekt test oder von test als Instanz der Klasse Array. Das ist aber nicht zwingend.

Instanzvariablen beziehungsweise Objektvariablen werden zum Definieren von Attributen eines bestimmten Objekts benutzt. Es handelt sich also bei Eigenschaften eines Objekts um nichts anderes als Instanzvariablen. Angesprochen werden sie ausschließlich über die Punktnotation. Dabei steht bei Bedarf auf der linken Seite des Punktes das Objekt, zu dem die Variable gehört, und auf der rechten Seite der Name der Variablen. Instanzvariablen sind nur innerhalb eines Objekts vorhanden. Ein paar Beispiele kennen Sie schon, auch wenn wir bisher nicht von Instanzvariablen gesprochen haben. Etwa status, welche zum Objekt navigator gehört und den Inhalt der Statuszeile beinhaltet. Oder die Eigenschaften des screen-Objekts - width und height. In der dritten Woche werden wir uns genauer mit dem Thema auseinandersetzen.

Globale Variablen

Globale Variablen werden außerhalb von Funktionen/Prozeduren/ Methoden/Objekten deklariert und stehen für alle Bestandteile eines Scripts zur Verfügung. Sie können damit zum Datenaustausch zwischen Funktionen/Prozeduren oder der Initialisierung von Werten genutzt werden.

Die beiden nachfolgenden Beispiele greifen auf Formulare zurück, die wir an späterer Stelle noch intensiver angehen. Hier sollen nur Teilaspekte davon verwendet werden.

Beispiel 10:

Erstellen Sie die nachfolgende Datei:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
var zaehler=0;
function klick()
{
zaehler++;
alert("Sie haben " + zaehler + " mal geklickt");
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT type="Button" value="Klick" onClick="klick()">
</FORM>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen global1.htm ab und laden Sie die Datei in den Browser. Zuerst wird die Variable zaehler global deklariert und mit dem Wert 0 vorbelegt. Die Funktion klick() wird jedes Mal aufgerufen, wenn in dem Formular auf den Button geklickt wird. Sie erzeugt eine Meldung, in der der Wert der Variablen ausgegeben wird. Diese Variable wird bei jedem Aufruf der Funktion um eins hochgezählt. Dies erzwingt aber, dass der vorherige Wert noch bekannt ist, was nur die globale Deklaration der Variablen gewährleistet (siehe Abbildung 8.15).

Abbildung 8.15:  Die Klicks werden mitgezählt

Beispiel 11:

Ein weiteres Beispiel tauscht über globale Variablen Werte aus, die ein Anwender in verschiedenen Formularen eingegeben hat. Das erste Formular wird direkt aus HTML-Anweisungen beim Laden der Seite aufgebaut. Der Anwender kann seinen Namen, Vornamen, eine Produktnummer und eine Anzahl eingeben.

Abbildung 8.16:  Die Eingaben im ersten Formular

Diese Eingaben sollen nun in eine neue Webseite samt neuem Formular übernommen werden. Das nachfolgende, etwas umfangreichere Beispiel leistet dies unter Verwendung einer dynamisch neu geschriebenen Seite und der Datenweitergabe mittels globaler Variablen:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
var pn=0;
var anz=0;
var name="";
var vorname="";

function schreibeNeuesFormular()
{
document.write("<H1 align=center>Seite 2</H1>");
document.write("<P align=center>");
document.write(
"Produktbestellung für ", vorname, " ", name, ".");
document.write("<BR>Ist die Bestellung so korrekt?");
document.write("<P align=left>");
document.write("<FORM>");
document.write("Produktnummer <INPUT> ");
document.write("Anzahl <INPUT><BR> ");
document.write("Kommentar <INPUT><BR> ");
document.write(
"Formular absenden <INPUT type='Submit' value='OK'>");
document.write("</FORM>");
fuelleForm2();
}

function fuelleForm2()
{
document.forms[0].elements[0].value=pn;
document.forms[0].elements[1].value=anz;
}

function weiter()
{
name=document.forms[0].elements[0].value;
vorname=document.forms[0].elements[1].value;
pn=document.forms[0].elements[2].value;
anz=document.forms[0].elements[3].value;
schreibeNeuesFormular();
}
</SCRIPT>
</HEAD>
<BODY>
<H1 align=center>Seite 1</H1>
<FORM>
Name <INPUT>
Vorname <INPUT>
<BR>
Produktnummer <INPUT>
Anzahl <INPUT>
<BR>
<INPUT type="Button" value="Weiter" onClick="weiter()">
</FORM>
</BODY>
</HTML>

Abbildung 8.17:  Die Eingaben im Formular werden in die neue Webseite und das zweite Formular übernommen

Testen Sie das Beispiel bitte im Internet Explorer und beachten Sie die Warnung nach der Erläuterung.

Zuerst wird rein über HTML ein Formular mit vier Eingabefeldern und einem Button generiert. Das JavaScript verwendet vier globale Variablen, die mit Defaultwerten initialisiert werden:

var pn=0;
var anz=0;
var name="";
var vorname="";

Diese speichern die Eingaben, welche der Anwender macht. Die Zuweisung erfolgt in der Funktion weiter(), die beim Klick auf den Button aufgerufen wird. Die nachfolgenden vier Zeilen belegen die jeweiligen globalen Variablen mit dem Wert, den der Anwender jeweils einträgt (auf die Details gehen wir bei der Behandlung von Formularen ein):

name=document.forms[0].elements[0].value;
vorname=document.forms[0].elements[1].value;
pn=document.forms[0].elements[2].value;
anz=document.forms[0].elements[3].value;

Die Funktion ruft dann die zweite Funktion schreibeNeuesFormular() auf. Diese generiert dynamisch eine neue Webseite mit normalen HTML- Anweisungen und einem neuen Formular. Interessant ist erst einmal die Zeile

document.write(
"Produktbestellung für ", vorname, " ", name, ".");

Dort werden zwei der globalen Variablen verwendet und deren Wert in den Text der Webseite geschrieben. Danach wird das Formular (noch ohne Vorbelegung) geschrieben.

Bevor die Seite angezeigt wird, wird die Funktion fuelleForm2() aufgerufen. Diese belegt mit den beiden Zeilen

document.forms[0].elements[0].value=pn;
document.forms[0].elements[1].value=anz;

das erste und das zweite Feld des neuen Formulars vor. Dazu werden die anderen beiden globalen Variablen verwendet.

Der Netscape Navigator hat in einigen Versionen ein Problem mit der auf obige Weise deklarierten globalen Variablen. Dies ist wieder eine ähnliche Situation wie an Tag 6 in Beispiel 1. Der Navigator kommt mit diesem Beispiel zurecht, wenn lokale Variablen in Form von Übergabeparametern verwendet werden. Den Workaround finden Sie als zweites Beispiel bei den jetzt behandelten lokalen Variablen.

Lokale Variablen

Lokale Variablen werden innerhalb von Methoden-, Funktions- oder Prozedurdefinitionen deklariert und können auch nur dort benutzt werden. Dazu gibt es den Fall der schleifenlokalen Variablen, die nur im Rahmen einer Schleife definiert sind. Lokale Variablen existieren nur so lange im Speicher, wie die Methode, die Funktion, die Prozedur oder der Block existiert.

Die Verwendung von lokalen Variablen hat einige Gründe:

Grundsätzlich ist die Verwendung von lokalen Variablen der Verwendung von globalen Variablen vorzuziehen, wenn es ohne Einschränkung möglich ist. Testen wir die Verwendung einer lokalen Variablen.

Beispiel 12:

Erstellen Sie die nachfolgende Datei:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function intern()
{
var a = 42;
alert("Intern: " + a);
}
function lade()
{
var a = 21;
alert("Aussen: " + a);
intern();
alert("Aussen 2: " + a);
}
</SCRIPT>
</HEAD>
<BODY onLoad=lade()>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen LokaleVar.htm ab und laden Sie die Datei in den Browser. Zuerst wird die Variable a mit dem Wert 21 gesetzt und dann angezeigt. Anschließend wir eine Funktion intern() aufgerufen, welche eine Variable gleichen Namens lokal definiert und mit dem Wert 42 belegt. Die Ausgabe beweist dies. Nachfolgend wird in der Funktion lade() erneut der Wert von a ausgegeben. Er ist unverändert, d.h. die Variable a in der Funktion intern() ist nur lokal auf die Funktion beschränkt gültig und hat die Variable in der Funktion lade() unberührt gelassen.

Beispiel 13:

Das nachfolgende Listing löst das Dilemma, das manche Varianten von dem Netscape Navigator mit Beispiel 11 haben. Dabei wird auf lokale Variablen zurückgegriffen. Insbesondere ist hier von Bedeutung, dass Parameter an Funktionen übergeben werden.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function schreibeNeuesFormular(pn, anz, name, vorname)
{
document.write("<H1 align=center>Seite 2</H1>");
document.write("<P align=center>");
document.write(
"Produktbestellung für ", vorname, " ", name, ".");
document.write("<BR>Ist die Bestellung so korrekt?");
document.write("<P align=left>");
document.write("<FORM>");
document.write("Produktnummer <INPUT> ");
document.write("Anzahl <INPUT><BR> ");
document.write("Kommentar <INPUT><BR> ");
document.write(
"Formular absenden <INPUT type='Submit' value='OK'>");
document.write("</FORM>");
document.forms[0].elements[0].value=pn;
document.forms[0].elements[1].value=anz;
}
function weiter()
{
name=document.forms[0].elements[0].value;
vorname=document.forms[0].elements[1].value;
pn=document.forms[0].elements[2].value;
anz=document.forms[0].elements[3].value;
schreibeNeuesFormular(pn,anz,name,vorname);
}
</SCRIPT>
</HEAD>
<BODY>
<H1 align=center>Seite 1</H1>
<FORM>
Name <INPUT>
Vorname <INPUT>
<BR>
Produktnummer <INPUT>
Anzahl <INPUT>
<BR>
<INPUT type="Button" value="Weiter" onClick="weiter()">
</FORM>
</BODY>
</HTML>

Beachten Sie die Zeile

function schreibeNeuesFormular(pn, anz, name, vorname)

wo in den Klammern vier Übergabewerte angegeben werden. Wenn die Funktion aufgerufen wird, müssen für diese Variablen (die innerhalb der Funktion über diese hier angegebenen Bezeichner verwendet werden können) in den Klammern vier Werte oder Variablen angegeben werden. Das sieht im Beispiel so aus:

schreibeNeuesFormular(pn,anz,name,vorname);

Die Namen der Übergabewerte im Aufruf der Funktion müssen nicht (!) übereinstimmen, obwohl es in diesem Beispiel der Fall ist.

Selbstverständlich gibt es unter JavaScript Datenfelder (Arrays) jeglichen Datentyps. Ein Array ist eine Sammlung von Variablen, die alle über einen Bezeichner und einen in eckigen Klammern notierten Index (bei 0 beginnend) angesprochen werden können. Etwa forms[0] bis forms[4] oder elements[1]. Auf Details zu diesem Thema werden wir aber erst an Tag 15 bei den Grundlagen zu Objekten eingehen.

Zusammenfassung

Wir haben am heutigen Tag die Technik von Funktionen, Prozeduren und Methoden genauer erläutert. Sowohl was die Gründe dafür sind, wo die Unterschiede zu sehen sind als auch, wie Funktionen zu erstellen und einzusetzen sind.

Der zweite Schwerpunkt waren Variablen und Datentypen, die in JavaScript für den Anwender recht simpel zu handhaben sind. Obwohl auch JavaScript Datentypen kennt und einsetzt, verwaltet JavaScript diese sehr oft im Hintergrund. Nur im Fall von Situationen, wo das Ergebnis nicht dem gewünschten Zustand entspricht, muss ein Programmierer manuell eingreifen.

Fragen und Antworten

Frage:
Es finden sich immer wieder Hinweise im Buch, dass JavaScript in vielen Bereichen sehr lockere Syntaxregeln bevorzugt. Warum ist das so?

Antwort:
Grundsätzlich gilt in der Tat, dass damit Einsteigern die Programmierung erheblich erleichtert wird. Die Sprache könnte nicht ein so großes Zielpublikum erreichen, wenn man die Strenge von Programmiersprachen wie Java anlegen würde.

Frage:
Kann man mehrere Variablen auch in einer Zeile deklarieren?

Antwort:
Ja. Dabei werden die Variablen einfach per Kommata getrennt:

var a, b, c, d;

Frage:
Kann man mehrere Variablen auch in einer Zeile deklarieren und gleichzeitig jeweils einen Wert zuweisen?

Antwort:
Nein, nicht in dem Sinn wie oben. Da man aber mehrere Anweisungen durch Semikolon getrennt in eine Textzeile schreiben kann, geht es in gewissem Sinn schon.

Workshop

Erstellen Sie eigene Funktionen und experimentieren Sie damit herum. Als Basis können Ihnen die Beispiele in diesem Kapitel dienen. Eine Sache sollten Sie auf jeden Fall ausprobieren. Wenn Sie in Beispiel 10 die Variable zaehler nicht außerhalb der Funktion deklarieren, bekommen Sie mehrere Probleme. Zum einen wird jeder gesetzte Wert beim Beenden der Funktion wieder »vergessen«, zum anderen muss aber die Variable vor ihrer ersten Verwendung initialisiert werden. Letzteres bedeutet, es wird immer der gleiche Wert angezeigt. Experimentieren Sie damit herum.

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

  1. Ist das eine korrekte Variablendeklaration?
    var i, j, k = 8, z;
  2. Stimmt die Deklaration der Funktion?
    function 2mal()
    {
    alert("Guckmal");
    }
  3. Stimmt die Deklaration der Funktion?
    function test();
    {
    alert("Guckmal");
    }
  4. Was passt bei dem Funktions-Aufruf nicht?
    test
  5. Kann das stimmen?
    function test()
    {
    return;
    }



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


12

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH