1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>SELFHTML: JavaScript / Sprachelemente / Variablen und Werte</title>
<link rel="stylesheet" type="text/css" href="../../src/selfhtml.css">
<meta name="description" content="Wie Sie in JavaScript eigene Variablen definieren, was Sie in Variablen speichern knnen, und wie Sie Variablen verwenden.">
<meta name="keywords" content="SELFHTML, JavaScript, Variablen, Werte, Zahlen, Zeichenketten, Strings, var">
<meta name="author" content="Redaktion SELFHTML, selfhtml81@selfhtml.org">
<meta name="robots" content="noindex, nofollow">
<meta name="DC.Publisher" content="SELFHTML e. V.">
<meta name="DC.Date" content="2005-08-22T21:21:39+02:00">
<meta name="DC.Identifier" content="http://de.selfhtml.org/javascript/sprache/variablen.htm">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="../../editorial/copyright.htm">
<meta name="DC.Date.created" content="2001-10-27T08:00+01:00">
<meta name="SELF.Pagetype" content="page">
<link rel="alternate" type="application/atom+xml" title="SELFHTML-Weblog (Atom, gesamt)" href="http://aktuell.de.selfhtml.org/weblog/atom-feed">
<link rel="alternate" type="application/rss+xml" title="SELFHTML-Weblog (RSS, Auszge)" href="http://aktuell.de.selfhtml.org/weblog/rss-feed">
<link rel="shortcut icon" type="image/x-icon" href="../../src/favicon.ico">
<link rel="author" title="Impressum" href="../../editorial/impressum.htm">
<link rel="contents" title="Inhaltsverzeichnis" href="../../navigation/inhalt.htm">
<link rel="index" title="Stichwortverzeichnis" href="../../navigation/stichwort.htm">
<link rel="search" title="Suche" href="../../navigation/suche/index.htm">
<link rel="help" title="Hilfe" href="../../editorial/index.htm">
<link rel="copyright" title="Urheberrecht" href="../../editorial/copyright.htm">
<link rel="top" title="SELFHTML" href="../../index.htm">
<link rel="up" title="Sprachelemente" href="index.htm">
<link rel="next" title="Objekte, Eigenschaften und Methoden" href="objekte.htm">
<link rel="prev" title="Allgemeine Regeln fr JavaScript" href="regeln.htm">
<link rel="first" title="Allgemeine Regeln fr JavaScript" href="regeln.htm">
<link rel="last" title="Event-Handler" href="eventhandler.htm">
</head>
<body>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr>
<td colspan="2" class="nav"><a class="an" name="top"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Sprachelemente</a></td>
</tr>
<tr>
<td class="doc" width="110"><a href="../../index.htm"><img src="../../src/logo.gif" width="106" height="109" border="0" alt="SELFHTML"></a></td>
<td class="docbot" width="100%"><h1 class="ph1">Variablen und Werte</h1></td>
</tr>
<tr>
<td class="doctop">
<img src="../../src/dokx.gif" width="30" height="20" vspace="6" alt="Informationsseite">
</td>
<td valign="top" nowrap="nowrap">
<p>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#definieren">Variablen definieren</a><br>
<img src="../../src/down.gif" width="14" height="10" alt="nach unten"> <a href="#aendern">Werte von Variablen ndern</a><br>
</p>
</td>
</tr><tr><td colspan="2" class="doc"> <a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a> </td></tr>
</table>
<h2><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="definieren">Variablen definieren</a></h2>
<p>Variablen sind Speicherbereiche, in denen Sie Daten, die Sie im Laufe Ihrer Programmprozeduren bentigen, speichern knnen. Der Inhalt, der in einer Variablen gespeichert ist, wird als "Wert" bezeichnet. Sie knnen den Wert einer Variablen jederzeit ndern. Um mit Variablen arbeiten zu knnen, mssen Sie die bentigten Variablen zuerst definieren.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/quadrate_ausgeben.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript">
var Hinweis = "Gleich werden Quadratzahlen ausgegeben";
alert(Hinweis);
function SchreibeQuadrate () {
var SinnDesLebens = 42;
var i, x;
var Satzteil = "Das Quadrat von ";
for (i = 1; i <= SinnDesLebens; ++i) {
x = i * i;
document.write(Satzteil + i + " ist " + x + "<br>");
}
}
SchreibeQuadrate();
</script>
</body>
</html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel gibt beim Aufruf der Seite eine Meldung aus, dass gleich Quadratzahlen ausgegeben werden. Besttigt der Anwender das Meldungsfenster, werden die Quadrate der Zahlen von 1 bis 42 ausgegeben.</p>
<p>Es gibt <b>globale Variablen</b> und <b>lokale Variablen</b>. Eine lokale Variable erhalten Sie durch die Deklaration der Variablen mit <code>var</code> innerhalb einer <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="funktionen.htm">Funktion</a>. Im obigen Beispiel sind die Variablen <code>SinnDesLebens</code>, <code>i</code>, <code>x</code> und <code>Satzteil</code> innerhalb der Funktion <code>SchreibeQuadrate()</code> als lokale Variablen notiert. Diese Variablen sind deshalb nur innerhalb dieser Funktion gltig. Man spricht in diesem Zusammenhang auch von der "Lebensdauer" von Variablen. Parameter, die einer Funktion bergeben werden, werden ebenfalls als lokale Variablen behandelt.<br>
Die Variable <code>Hinweis</code> ist dagegen eine global Variable. Sie ist im gesamten Dokument gltig und steht jederzeit zur Verfgung. Wenn Sie innerhalb von Funktionen Variablen <b>ohne</b> das Schlsselwort <code>var</code> deklarieren, dann sind diese Variablen global.</p>
<p>Jede Variablendeklaration wird mit einem Strichpunkt abgeschlossen, da sie eine ganz normale <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="regeln.htm#anweisungen">Anweisung</a> darstellt.</p>
<p>Variablen knnen mit oder ohne weitere Wertzuweisung deklariert werden. Im obigen Beispiel wird etwa der Variablen <code>SinnDesLebens</code> bei der Definition gleich ein Wert zugewiesen, nmlich 42. Auch die Variable <code>Satzteil</code> erhlt eine anfngliche Wertzuweisung, nmlich den Wert <code>"Das Quadrat von "</code>. Die Variablen <code>i</code> und <code>x</code> werden dagegen nicht mit einem Anfangswert versehen. Beim Zuweisen eines Wertes notieren Sie hinter dem Variablennamen ein Istgleichzeichen und dahinter den Wert, den Sie der Variablen zuweisen wollen.</p>
<p>Sie knnen mehrere Variablen auf einmal definieren, so wie die beiden Variablen <code>i</code> und <code>x</code> im Beispiel. Dazu trennen Sie die Variablennamen durch Kommata. Das ist natrlich auch in Verbindung mit zugewiesenen Anfangswerten mglich.</p>
<p>Es gibt numerische Variablen und Variablen fr Zeichen bzw. Zeichenketten. Im obigen Beispiel sind die Variablen <code>SinnDesLebens</code>, <code>i</code> und <code>x</code> numerische Variablen. Die Variablen <code>Hinweis</code> und <code>Satzteil</code> sind dagegen Zeichenkettenvariablen. Dies ist daran erkennbar, dass der ihnen zugewiesene Wert, ein Text, in Anfhrungszeichen gesetzt wird. Sie knnten z.B. eine Variable <code>Nummer = 1;</code> und eine Variable <code>Zeichen = "1";</code> definieren. Der Unterschied ist, dass Sie mit der Variablen <code>Nummer</code> Rechenoperationen anstellen knnen, mit der Variablen <code>Zeichen</code> nicht. Dafr knnen Sie mit Zeichenkettenvariablen Zeichenkettenoperationen durchfhren, etwa das Extrahieren einer Teilzeichenkette, was mit numerischen Variablen nicht mglich ist.</p>
<h3 class="inf">Beachten Sie:</h3>
<p>Bei der Vergabe von Variablennamen gelten die Regeln fr <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="regeln.htm#namen">selbstvergebene Namen</a>.</p>
<p>Variablen in JavaScript sind nicht so streng an Typen gebunden wie in vielen anderen Programmiersprachen. Einfache Variablentypen, wie Zahlen, Zeichenketten oder Wahrheitswerte, werden lediglich nach numerischen und nicht-numerischen Variablen eingeteilt. Kommazahlen und Ganzzahlen bentigen keine unterschiedlichen Typen. Der Inhalt von numerischen Variablen kann ohne vorherige Konvertierung in Zeichenketten auf den Bildschirm oder in Meldungsfenster geschrieben werden. Umgekehrt knnen Sie aber mit Zeichenketten, z.B. Werten aus Formularfeldern, nicht immer automatisch rechnen, sondern mssen sie vorher explizit in Zahlen umwandeln. Fr die explizite Typumwandlung gibt es verschiedene <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/unabhaengig.htm">objektunabhngige Funktionen</a>.</p>
<p class="doc"><a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a><a href="#bottom"><img src="../../src/down.gif" width="14" height="10" border="0" alt="nach unten"></a></p>
<h2><img src="../../src/js10.gif" width="30" height="30" alt="JavaScript 1.0" title="JavaScript 1.0"><img src="../../src/netsc2.gif" width="30" height="30" alt="Netscape 2.0" title="Netscape 2.0"><img src="../../src/msie3.gif" width="30" height="30" alt="MS IE 3.0" title="MS IE 3.0"><img src="../../src/op512.gif" width="30" height="30" alt="Opera 5.12" title="Opera 5.12"><img src="../../src/ffox1.gif" width="30" height="30" alt="Mozilla Firefox 1" title="Mozilla Firefox 1"><img src="../../src/konq31.gif" width="30" height="30" alt="Konqueror 3.1" title="Konqueror 3.1"><img src="../../src/saf1.gif" width="30" height="30" alt="Safari 1.0" title="Safari 1.0"> <a class="an" name="aendern">Werte von Variablen ndern</a></h2>
<p>Wertnderungen von Variablen sind das A & O bei der Programmierung. Sie werden nur dann erfolgreich eigene Programme schreiben knnen, wenn Sie jederzeit den berblick haben, was in einer Variablen an einem bestimmten Punkt des Programmablaufs steht. Besonders, wenn Sie mit <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="bedingt.htm">bedingten Anweisungen</a> oder <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="schleifen.htm">Schleifen</a> arbeiten, werden Sie schnell feststellen, wie leicht der berblick ber den aktuellen Zustand einer Variablen verloren gehen kann.</p>
<h3 class="xmp">Beispiel:</h3>
<p><img src="../../src/dokf.gif" width="15" height="10" alt="Beispiel-Seite"> <a href="anzeige/tabellenzahlen.htm">Anzeigebeispiel: So sieht's aus</a></p>
<pre>
<html>
<head>
<title>Sinn des Lebens zum Quadrat</title>
</head>
<body>
<script type="text/javascript">
function SchreibeTabelle () {
var SinnDesLebens = 42;
var i, x, y;
document.write('<table border="1"><tr>');
document.write('<td bgcolor="#EEEEEE">Wert<\/td>');
document.write('<td bgcolor="#EEEEEE">Wert<sup>2<\/sup><\/td>');
document.write('<td bgcolor="#EEEEEE">Wert<sup>3<\/sup><\/td><\/tr>');
for (i=1; i <= SinnDesLebens; ++i) {
x = i * i;
y = i * i * i;
document.write("<tr><td>" + i + "<\/td>");
document.write("<td>" + x + "<\/td>");
document.write("<td>" + y + "<\/td><\/tr>");
}
document.write("<\/table>");
}
SchreibeTabelle();
</script>
</body>
</html>
</pre>
<h3 class="xpl">Erluterung:</h3>
<p>Das Beispiel und erzeugt dynamisch eine Tabelle mit 3 Spalten und 42 Zeilen plus einer Kopfzeile. In die Zellen der Tabelle werden fr die Zahlen von 1 bis 42 der Quadratwert und der Kubikwert geschrieben. Zum Ausgeben dieser Tabelle benutzt das Script die <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="objekte.htm#methoden">Methode</a> <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../objekte/document.htm#write">document.write</a>.</p>
<p>Die Variable <code>SinnDesLebens</code> wird whrend des Programmablaufs zwar benutzt, aber ihr Wert wird nicht gendert. Die Variablen <code>i</code>, <code>x</code> und <code>y</code> dagegen ndern ihren Wert laufend. Das liegt daran, dass sie innerhalb einer <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="schleifen.htm#for">for-Schleife</a> bei jedem Schleifendurchlauf neue Werte zugewiesen bekommen.</p>
<p>Die Wertzuweisung erfolgt, indem Sie den Variablennamen, dahinter ein Istgleichzeichen und dahinter den gewnschten Wert notieren. Bei dem Wert, den Sie zuweisen, knnen Sie anstelle einer bestimmten Zahl oder einer Zeichenkette auch Namen anderer Variablen notieren. So wird im Beispiel der Variablen <code>x</code> bei jedem Schleifendurchlauf als Wert das Ergebnis der mit sich selbst multiplizierten Variablen <code>i</code> zugewiesen und <code>y</code> das Ergebnis von <code>i * i * i</code>.</p>
<table cellpadding="4" cellspacing="0" border="0" width="100%">
<tr><td colspan="2" class="doc">
<a href="#top"><img src="../../src/up.gif" width="14" height="10" border="0" alt="nach oben"></a>
</td></tr>
<tr><td class="doc"><a href="objekte.htm"><img src="../../src/next.gif" width="10" height="10" border="0" hspace="10" alt="weiter"></a></td>
<td width="100%"><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="objekte.htm">Objekte, Eigenschaften und Methoden</a>
</td></tr>
<tr>
<td class="doc"><a href="regeln.htm"><img src="../../src/prev.gif" width="10" height="10" border="0" hspace="10" alt="zurck"></a></td>
<td><img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="regeln.htm">Allgemeine Regeln fr JavaScript</a>
</td>
</tr>
<tr><td colspan="2" class="doc"> </td>
</tr>
<tr>
<td colspan="2" class="nav"><a class="an" name="bottom"><img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"></a> <a href="../../index.htm">SELFHTML</a>/<a href="../../navigation/index.htm" target="_parent" class="navh">Navigationshilfen</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="../index.htm">JavaScript/DOM</a> <img src="../../src/refkap.gif" width="16" height="13" alt="Teil von"> <a href="index.htm">Sprachelemente</a></td>
</tr>
</table>
<p>© 2007 <img src="../../src/dok.gif" width="15" height="10" alt="Seite"> <a href="../../editorial/impressum.htm">Impressum</a></p>
</body>
</html>
|
