JavaScript Einsteiger-Kurs Teil 6: Variablen in JS

Nachdem in dem ersten Teil des JavaScript-Kurses die eigentliche Programmierung etwas zu kurz kam, steigen wir jetzt voll ein: Variablen und Bildschirmausgabe sind die Themen.

Variables

Wer schon in C programmiert hat, wird sicherlich die strengen Regeln für Variablen kennen: jede Variable will definiert werden und ihr Wertebereich ist zu beachten. Wird dies nicht beachtet, hagelt es geradezu Fehlermeldungen. In älteren Basic-Versionen ist eine Variable hingegen definiert, sobald sie das erstemal auftaucht. Um es schon gleich vorweg zu nehmen: trotz einiger Anleihen bei C ist die Variablenbehandlung in JavaScript eher lax und in einigen Bereichen inkonsistent. Sie ist auch der Grund für einige Verwirrungen - gerade bei JavaScript-Anfängern.

Schubladen

Damit auch diejenigen, die sich unter Variablen nichts vorstellen können, zugang zu diesem Kurs erhalten, folgt eine kurze Erklärung. Variablen werden in Programmiersprachen dazu verwendet, Werte zuzuweisen, z.B. einen Text oder ein Ergebnis. Mit Variablen lassen sich mathematische Operationen durchführen. Schubladen sind mit ihnen vergleichbar, denn sie nehmen Sachen auf und geben sie auf Wunsch wieder her.

Typen

JavaScript kennt nur zwei Variablentypen. Die einen können Zahlen aufnehmen, die anderen Text und Zahlen (Strings). Im Gegensatz zu Basic gibt es keine visuelle Unterscheidung zwischen den Variablentypen. Während es in GFA-Basic Pflicht ist, String-Variablen mit einem Dollar-Zeichen ($) am Ende zu versehen, werden solche Suffixe in JS weggelassen. Dem C-Programmierer mag dies bekannt vorkommen, allerdings kennt JS auch keine einleitende Definition à la Pascal oder C:

char wort;
int i, j, k;

gibt es in JavaScript nicht. Aber wie weiß JS nun vorher, für was welche Variable geeignet ist? Ganz einfach: gar nicht. Der Typ einer Variable ist zunächst einmal von der ersten Verwendung abhängig und kann im laufe des Scriptverlaufs munter wechseln, ohne das JS sich beschwert. Nach Möglichkeit und auch aus Gründen der Übersicht sollten die Variablen aber ihren Typ behalten.

Wertebereich/Genauigkeit

Der Wertebereich ist nicht eindeutig definiert. Vermutlich werden im Inneren des Browsers alle Variablen wie Strings behandelt. Zahlenvariablen können positiv oder negativ sein und auch Nachkommastellen enthalten. JS wurde allerdings nicht erschaffen, um wissenschaftlich besonders genau zu sein. Für einfache Umrechnungen mit fünf Stellen hinter dem Komma, reicht es völlig aus.
Welchen Umfang Strings annehmen können, ist ebenfalls nicht strikt definiert. Es gibt aber JS-Programmierer, die kamen auf die Idee, eine ganze Web-Seite verschlüsselt in eine JS-Variable zu packen, damit niemand den HTML-Quellcode ansehen kann. Eine nette Idee, nur da die Entschlüsselungsroutine immer mit dabei sein muß, ist die Verschlüsselung schnell geknackt. Es gibt eine Reihe solcher "HTML-Verschlüsseler" auf der Windows-Plattform, die ihre Sicherheit vor allem daher erhalten, das die verschlüsselten Seiten sowieso niemand entschlüsseln will.
Zurück zu den Strings: sie können relativ groß werden, doch häufig besteht dazu kein Anlaß. JS kann keine großen Datenmengen einlesen und sie bearbeiten, für die Bearbeitung z.B. von Formularfeldern sind sie aber völlig ausreichend.

Knowing me, knowing you

Bevor die erste Variable angelegt wird, sollte man die Namensregeln kennen. Variablennamen können Groß- und Kleinbuchstaben enthalten, sowie Zahlen. Das erste Zeichen des Namens darf keine Zahl sein, zudem unterscheidet JS zwischen Groß- und Kleinschreibung. Tabu sind Sonderzeichen (Umlaute) und Leerzeichen. Wer gerne englische Wörter als Namen verwendet, muß darauf achten, das dieser nicht mit einem der reservierten Worte von JS identisch ist, denn sonst wird eine Fehlermeldung zurückgeliefert. Der Unterstrich ("_") ist hingegen erlaubt, auch wenn manche Netscape-Versionen damit Probleme haben. Variablennamen dürfen bis zu 32 Zeichen lang sein.
Gültige Variablennamen:
a, AktuelleAdresse, mAlKLeinMalgroSs
Ungültige Namen:
ä, Zeichen Kette, mjamm§fhjjj

Die ersten Variablen

Zuerst geht es um numerische Variablen. Im ersten Kursteil konnten sie bereits lesen, wie JavaScript in eine HTML-Seite eingebettet wird, daher folgt nur der JavaScript-Code:

var a;
var b=34;
a=b+6;

War eben noch die Rede von der "Typenlosigkeit" von JavaScript-Variablen, so taucht jetzt eine solche scheinbar auf. Das Schlüsselwort "var" ist nicht notwendig und dient nur der Übersicht. Folgendes Beispiel leistet genau das gleiche:

b=34;
a=b+6;

Wichtig ist, das eine Variable definiert sein muß, bevor sie "ernsthaft" verwendet wird. In dem Beispiel wird "b" durch eine Zuweisung und "a" durch eine Berechnung definiert. Anders sieht es beim folgenden Beispiel aus:

a=b+6;

In GFA-Basic würde die Berechnung ausgeführt werden, denn eine nicht definierte, numerische Variable ist in Basic für gewöhnlich Null. JavaScript meldet hingegen einen Fehler.
Da eine Berechnung ohne Darstellung wenig bringt und das ständige Wegklicken von Hinweisboxen störend ist, gibt es hier einen Befehl zur direkten Ausgabe im Browserfenster:

b=34;
a=b+6;
document.write(a);

gibt ‚40' im Browserfenster aus. An Berechnungen kennt JS die vier Grundrechenarten, sowie einfache Funktionen zum Berechnen des Sinus, Cosinus etc. . Ein Beispiel, das mit Multiplikation und Nachkommastellen arbeitet:

euro=34;
a=euro*1.95583;
document.write(a);

Konstanten

Wie fast jede Sprache kennt auch JavaScript einige vordefinierte Konstanten, die in Berechnungen eingesetzt werden können:

Konstante Wert (ca.) Anwendung
PI 3,14159 | | Kreisberechnungen
E 2,718 | | Eulersche Konstante
LN2 0,693 | | natürlicher Logarithmus von 2
LN10 2,302 | | natürlicher Logarithmus von 10
LOG2E 1,442 | | Logarithmus von 2
LOG10E 0,434 | Logarithmus von 10
SQRT1_2 0,707 | Quadratwurzel aus 0,5
SQRT2 1,414 | | Quadratwurzel aus 2

Nun ist gerade das "E" ein Buchstabe, der gerne auch einmal als Variablenname verwendet wird. Die Schreibweise für die Konstanten sieht jedoch etwas anders aus. Um den Wert der Eulerschen Konstante auf den Bildschirm auszugeben, muß folgendes Script eingegeben werden:

document.write(Math.E);

Alle in JavaScript vordefinierten mathematischen Funktionen und Konstanten tragen das Schlüsselwort "Math." davor. Die Groß- und Kleinschreibung ist dabei genau einzuhalten, da die Browser dort sehr penibel sind - während "Math.E" 2,718 ergibt, ist "Math.e" nicht definiert.

Strings

Der Sprung von numerischen Variablen zu den Strings ist gar nicht so groß, erst recht nicht in JavaScript. String-Variablen unterscheiden sich bei ihrer Definition vor allem dadurch, das ihr Inhalt in Hochkommata oder Anführungszeichen eingeschlossen ist:

a = "Hallo Welt";
document.write(a);

Gibt "Hallo Welt" aus. Natürlich sind mit Strings nicht in gleicher Weise mathematische Operationen möglich, das Zusammenfügen zweier Strings funktioniert aber analog:

b = "ST-";
a = b+"Computer";
document.write(a);

Gibt "ST-Computer" aus. Etwas was in anderen Sprachen undenkbar ist, ist das kombinieren von numerischen Variablen und Strings ohne Typenkonvertierung:

b = "Atari ST";
a = b+1040;
document.write(a);

Dieses Beispiel gibt "Atari ST1040" aus. Strings haben im Konfiktfall immer Vorrang, selbst wenn dieser String eine Zahl enthält:

b = "8";
a = b+1040;
document.write(a);

ergibt im Browser "10408". Damit dieses Beispiel korrekt berechnet wird, kann z.B. die vorgegebene JavaScript-Funktion eval verwendet werden:

b = "8";
a = eval(b)+1040;
document.write(a);

ergibt "1048". Die Funktion eval (evaluate) ist übrigens noch leistungsfähiger, denn mit ihr lassen sich ganze Rechenaufgaben, die in Strings enthalten sind, lösen:

b = "8+5*6+7";
a = eval(b);
document.write(a);

ergibt 45. Punkt- vor Strichrechnung wird dabei beachtet.

Ausgabe auf dem Bildschirm

In den Beispielen wurde fleißig von der Funktion write Gebrauch gemacht. Eine Erweiterung dieser Funktion ist writeln, wobei sich diese von write nur dadurch unterscheidet, das am Ende ein Zeilenumbruch ausgegeben wird. In Bereichen, die mit vorformatierten Text (<PRE>...</PRE>) stehen, reicht das aus. Für andere Bereiche muß auf HTML zurückgegriffen werden:

b = "8+5*6+7";
a = eval(b);
document.write(a+"<br>");
document.write("Ich stehe in einer neuen Zeile.");

Ausblick

Nächstes Mal geht es voraussichtlich um die vordefinierten Funktionen für Variablen.


Mia Jaap
Links

Copyright-Bestimmungen: siehe Über diese Seite