JavaScript - Vordefinierte Objekte
Grundlagen zu vordefinierten Objekten
In JavaScript gibt es bereits vordefinierte Objekte, die häufig benötigte Methoden beinhalten. Mathematische Methoden sind in diesen Objekten genauso vorhanden wie Methoden zur Berechnung und Verwendung von Uhrzeiten oder Kalendertagen. Es gibt ein vordefiniertes Objekt zum Abspeichern von Variablenlisten. Zeichenketten werden grundsätzlich als String-Objekte abgelegt, die dem Programmierer auch Methoden zur Zeichenkettenverarbeitung zur Verfügung stellen. Auch Zahlen und boolesche Werte werden tatsächlich in Objekten abgelegt. Seit der Version 1.2 gibt es in JavaScript außerdem noch die Objekte Screen und RegExp. Ersteres kapselt die Eigenschaften des Bildschirms des Benutzers, Letzteres implementiert das Konzept der regulären Ausdrücke für JavaScript.
Objekt String für Zeichenketten
Das string-Objekt wurde bereits in den vorangegangenen Beispielen verwendet, da alle Zeichenkettenvariablen string-Objekte sind. Dies bedeutet, dass nicht nur der Inhalt der Zeichenkette durch den Variablennamen erreichbar ist, sondern auch die Eigenschaft length des string-Objekts (Länge der Zeichenkette). Außerdem besitzt das Objekt Methoden, um z. B. einen Teil der Zeichenkette zurückzuliefern.
x = String.Eigenschaft;
y = String.Methode(Übergabewert);
Zur Darstellung der verschiedenen Verarbeitungsmöglichkeiten soll als Beispiel die Variable zitat mit der Zeichenkette „Sein oder nicht sein,“ verwendet werden (zitat = „Sein oder nicht sein,“). Der Zugriff auf das erste Zeichen erfolgt im Folgenden über den Index 0. Auf das zweite Zeichen greifen Sie mit dem Index 1 zu usw.
Beispiel: objekt_string1.html
- objekt_string1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Objekt String</title>
<link type="text/css" rel=stylesheet href="style.css">
</head>
<body>
<h2>Zeichenketten-Verarbeitung</h2>
<script type="text/javascript">
var zitat1="Sein oder nicht sein,";
var zitat2=" das ist hier die Frage.";
document.write( "zitat1 = " + zitat1 + "<br>"
+ "zitat2 = " + zitat2 + "<br>"
+ "zitat1.length = " + zitat1.length + " Zeichen<br>"
+ "zitat1.charAt(6) = " + zitat1.charAt(6) + "<br>"
+ "zitat1.charCodeAt(6) = " + zitat1.charCodeAt(6) + "<br>"
+ "zitat1.concat(zitat2) = " + zitat1.concat(zitat2) + "<br>"
+ "zitat1.indexOf('c') = " + zitat1.indexOf("c") + ". Stelle<br>"
+ "zitat1.lastIndexOf('e') = " + zitat1.lastIndexOf("e") + ". Stelle<br>"
+ "zitat1.slice(5, 9) = " + zitat1.slice(5, 9) + "<br>"
+ "zitat1.split(' ') = " + zitat1.split(" ") + "<br>"
+ "zitat1.substr(5, 4) = " + zitat1.substr(5, 4) + "<br>"
+ "zitat1.substring(5, 9) = " + zitat1.substring(5, 9) + "<br>"
+ "zitat1.toLowerCase() = " + zitat1.toLowerCase() + "<br>"
+ "zitat1.toUpperCase() = " + zitat1.toUpperCase() + "<br>");
</script>
</body>
</html>
Beispiel: objekt_string2.html
- objekt_string2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<link type="text/css" rel=stylesheet href="style.css">
<title>Objekt String</title>
<script type="text/javascript">
var zitat1='Sein oder nicht sein,';
</script>
</head>
<body>
<h2>HTML-Methoden von String</h2>
<p>Vorgabe: zitat1='Sein oder nicht sein,';</p>
<table summary="Übersicht der HTML-Methoden des Objekts string" border="1" width="100%">
<tr>
<td width="25%"><b>Methode</b></td>
<td width="41%"><b>Beispiel</b></td>
<td width="34%"><b>Ausgabe</b></td>
</tr>
<tr>
<td>anchor(Anker)</td>
<td>zitat1.anchor("#anker");</td>
<td>
<script type="text/javascript">
document.write(zitat1.anchor("#anker"));
</script>
</td>
</tr>
<tr>
<td>big()</td>
<td>zitat1.big()</td>
<td>
<script type="text/javascript">
document.write(zitat1.big());
</script>
</td>
</tr>
<tr>
<td>blink()</td>
<td>zitat1.blink()</td>
<td>
<script type="text/javascript">
document.write(zitat1.blink());
</script>
</td>
</tr>
<tr>
<td>bold()</td>
<td>zitat1.bold()</td>
<td>
<script type="text/javascript">
document.write(zitat1.bold());
</script>
</td>
</tr>
<tr>
<td>fixed()</td>
<td>zitat1.fixed()</td>
<td>
<script type="text/javascript">
document.write(zitat1.fixed());
</script>
</td>
</tr>
<tr>
<td>fontcolor()</td>
<td>zitat1.fontcolor("red")</td>
<td>
<script type="text/javascript">
document.write(zitat1.fontcolor("red"));
</script>
</td>
</tr>
<tr>
<td>fontsize()</td>
<td>zitat1.fontsize("+2")</td>
<td>
<script type="text/javascript">
document.write(zitat1.fontsize("+2"));
</script>
</td>
</tr>
<tr>
<td>italics()</td>
<td>zitat1.italics()</td>
<td>
<script type="text/javascript">
document.write(zitat1.italics());
</script>
</td>
</tr>
<tr>
<td>link(Hyperlink)</td>
<td>zitat1.link("http://www.mein.web")</td>
<td>
<script type="text/javascript">
document.write(zitat1.link("http://www.mein.web"));
</script>
</td>
</tr>
<tr>
<td>small()</td>
<td>zitat1.small()</td>
<td>
<script type="text/javascript">
document.write(zitat1.small());
</script>
</td>
</tr>
<tr>
<td>strike()</td>
<td>zitat1.strike()</td>
<td>
<script type="text/javascript">
document.write(zitat1.strike());
</script>
</td>
</tr>
<tr>
<td>sub()</td>
<td>zitat1.sub()</td>
<td>
<script type="text/javascript">
document.write(zitat1.sub());
</script>
</td>
</tr>
<tr>
<td>sup()</td>
<td>zitat1.sup()</td>
<td>
<script type="text/javascript">
document.write(zitat1.sup());
</script>
</td>
</tr>
</table>
</body>
</html>
Objekt Math für mathematische Berechnungen
Einige Aufgabenstellungen benötigen mathematische Funktionen oder Konstanten zu ihrer Lösung. JavaScript stellt Funktionen und Konstanten über das Math-Objekt zur Verfügung.
Mathematische Konstanten
Diese Konstanten sind fest in JavaScript implementiert. Die Werte lassen sich über den Namen der Konstanten als Eigenschaft des Objekts Math abrufen.
Beispiel: objekt_math_const.html
Im Beispiel werden die mathematischen Konstanten aufgelistet, die wir über die Angabe der entsprechenden Eigenschaft abrufen können.
- objekt_math_const.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<link type="text/css" rel=stylesheet href="style.css">
<title>Objekt Math</title>
</head>
<body>
<h2>Mathematische Konstanten</h2>
<table summary="Übersicht der mathematischen Konstanten" border="1" width="100%">
<tr>
<td width="15%"><b>Eigenschaft</b></td>
<td width="40%"><b>Bedeutung</b></td>
<td width="20%"><b>Beispiel</b></td>
<td width="25%"><b>Ausgabe</b></td>
</tr>
<tr>
<td width="15%">E</td>
<td width="40%">Eulersche Zahl</td>
<td width="20%">Math.E</td>
<td width="25%">
<script type="text/javascript">
document.write(Math.E);
</script>
</td>
</tr>
<tr>
<td width="15%">LN2</td>
<td width="40%">Natürlicher Logarithmus von 2</td>
<td width="20%">Math.LN2</td>
<td width="25%">
<script type="text/javascript">
document.write(Math.LN2);
</script>
</td>
</tr>
<tr>
<td width="15%">LN10</td>
<td width="40%">Natürlicher Logarithmus von 10</td>
<td width="20%">Math.LN10</td>
<td width="25%">
<script type="text/javascript">
document.write(Math.LN10);
</script>
</td>
</tr>
<tr>
<td width="15%">LOG2E</td>
<td width="40%">Logarithmus von e zur Basis 2</td>
<td width="20%">Math.LOG2E</td>
<td width="25%">
<script type="text/javascript">
document.write(Math.LOG2E);
</script>
</td>
</tr>
<tr>
<td width="15%">LOG10E</td>
<td width="40%">Logarithmus von e zur Basis 10</td>
<td width="20%">Math.LOG10E</td>
<td width="25%">
<script type="text/javascript">
document.write(Math.LOG10E);
</script>
</td>
</tr>
<tr>
<td width="15%">PI</td>
<td width="40%">Zahl π</td>
<td width="20%">Math.PI</td>
<td width="25%">
<script type="text/javascript">
document.write(Math.PI);
</script>
</td>
</tr>
<tr>
<td width="15%">SQRT1_2</td>
<td width="40%">1 dividiert durch die Wurzel von 2</td>
<td width="20%">Math.SQRT1_2</td>
<td width="25%">
<script type="text/javascript">
document.write(Math.SQRT1_2);
</script>
</td>
</tr>
<tr>
<td width="15%">SQRT2</td>
<td width="40%">Wurzel aus 2</td>
<td width="20%">Math.SQRT2</td>
<td width="25%">
<script type="text/javascript">
document.write(Math.SQRT2);
</script>
</td>
</tr>
</table>
</body>
</html>
Mathematische Funktionen
Beispiel: objekt_math_methoden.html
Die Winkel beim Aufruf der Funktionen Sinus, Cosinus und Tangens sind im Bogenmaß (Einheit Radiant, rad) anzugeben.
- objekt_math_methoden.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<link type="text/css" rel=stylesheet href="style.css">
<title>Math-Objekt</title>
</head>
<body>
<h2>Mathematische Funktionen</h2>
<table summary="Übersicht der mathematischen Funktionen" border="1" width="100%">
<tr>
<td width="15%"><b>Methode</b></td>
<td width="30%"><b>Bedeutung</b></td>
<td width="15%"><b>Wertebereich</b></td>
<td width="20%"><b>Beispiel</b></td>
<td width="20%"><b>Ausgabe</b></td>
</tr>
<tr>
<td width="15%">abs(Zahl)</td>
<td width="30%">Absolutwert</td>
<td width="15%">Reale Zahlen</td>
<td width="20%">Math.abs(-9)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.abs(-9));
</script>
</td>
</tr>
<tr>
<td width="15%">acos(Zahl)</td>
<td width="30%">Arcuscosinus</td>
<td width="15%">[-1;1]</td>
<td width="20%">Math.acos(-1)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.acos(-1));
</script>
</td>
</tr>
<tr>
<td width="15%">asin(Zahl)</td>
<td width="30%">Arcussinus</td>
<td width="15%">[-1;1]</td>
<td width="20%">Math.asin(0.5)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.asin(0.5));
</script>
</td>
</tr>
<tr>
<td width="15%">atan(Zahl)</td>
<td width="30%">Arcustangens</td>
<td width="15%">[-1;1]</td>
<td width="20%">Math.atan(-0.5)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.atan(-0.5));
</script>
</td>
</tr>
<tr>
<td width="15%">ceil(Zahl)</td>
<td width="30%">Aufrunden zur nächsten Ganzzahl</td>
<td width="15%">Reale Zahlen</td>
<td width="20%">Math.ceil(9.3)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.ceil(9.3));
</script>
</td>
</tr>
<tr>
<td width="15%">cos(Zahl)</td>
<td width="30%">Cosinus</td>
<td width="15%">Reale Zahlen (Rad)</td>
<td width="20%">Math.cos(Math.PI)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.cos(Math.PI));
</script>
</td>
</tr>
<tr>
<td width="15%">exp(Zahl)</td>
<td width="30%"> Exponentialwert der Zahl auf Basis der Eulerschen Konstanten
E</td>
<td width="15%">Reale Zahlen</td>
<td width="20%">Math.exp(9.3)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.exp(9.3));
</script>
</td>
</tr>
<tr>
<td width="15%">floor(Zahl)</td>
<td width="30%">Abrunden zur nächsten Ganzzahl</td>
<td width="15%">Reale Zahlen</td>
<td width="20%">Math.floor(3.9)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.floor(3.9));
</script>
</td>
</tr>
<tr>
<td width="15%">log(Zahl)</td>
<td width="30%">Natürlicher Logarithmus</td>
<td width="15%">Reale Zahlen > 0</td>
<td width="20%">Math.log(3.9)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.log(3.9));
</script>
</td>
</tr>
<tr>
<td width="15%">max(Zahl1, Zahl2)</td>
<td width="30%">Rückgabe der größeren Zahl</td>
<td width="15%">Reale Zahlen</td>
<td width="20%">Math.max(9,3)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.max(9,3));
</script>
</td>
</tr>
<tr>
<td width="15%">min(Zahl1, Zahl2)</td>
<td width="30%">Rückgabe der kleineren Zahl</td>
<td width="15%">Reale Zahlen</td>
<td width="20%">Math.min(9,3)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.min(9,3));
</script>
</td>
</tr>
<tr>
<td width="15%">pow(Zahl1, Zahl2)</td>
<td width="30%">Exponentialfunktion "Zahl1 hoch Zahl2"</td>
<td width="15%">Reale Zahlen</td>
<td width="20%">Math.pow(9,3)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.pow(9,3));
</script>
</td>
</tr>
<tr>
<td width="15%">random()</td>
<td width="30%">Zufallszahl zwischen 0 und 1</td>
<td width="15%"> </td>
<td width="20%">Math.random()</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.random());
</script>
</td>
</tr>
<tr>
<td width="15%">round(Zahl)</td>
<td width="30%">kaufmännisches Runden</td>
<td width="15%">Reale Zahlen</td>
<td width="20%">Math.round(3.5)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.round(3.5));
</script>
</td>
</tr>
<tr>
<td width="15%">sin(Zahl)</td>
<td width="30%">Sinus</td>
<td width="15%">Reale Zahlen (Rad)</td>
<td width="20%">Math.sin(Math.PI/2)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.sin(Math.PI/2));
</script>
</td>
</tr>
<tr>
<td width="15%">sqrt(Zahl)</td>
<td width="30%">Quadratwurzel</td>
<td width="15%">Reale Zahlen > 0</td>
<td width="20%">Math.sqrt(9)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.sqrt(9));
</script>
</td>
</tr>
<tr>
<td width="15%">tan(Zahl)</td>
<td width="30%">Tangens</td>
<td width="15%">Reale Zahlen (Rad)</td>
<td width="20%">Math.tan(Math.PI/4)</td>
<td width="20%">
<script type="text/javascript">
document.write(Math.tan(Math.PI/4));
</script>
</td>
</tr>
</table>
</body>
</html>
Beispiel: objekt_math_random.html
Die Methode random() liefert Zufallszahlen. Das folgende Beispiel beinhaltet die Funktion RolleWuerfel(), die mit der random()-Methode zufällige Zahlen zwischen 1 und 6 erzeugt:
- objekt_math_random.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Würfel</title>
</head>
<body>
<font size="+2">Würfelergebnisse:<br>
<script type="text/javascript">
function RolleWuerfel()
{
var Zufallszahl = Math.random() * 6;
return (Math.floor(Zufallszahl) + 1);
}
for(i = 0; i < 10; i++)
document.write(RolleWuerfel() + " - ");
</script>
</font>
</body>
</html>
Die Werte ändern sich jedes Mal, sobald wir das HTML-Dokument über das entsprechende Menü im Browser aktualisieren. Es wird dadurch immer eine zufällige Zahlenfolge ausgegeben.
Objekt Number für Zahlen
So, wie Sie das String-Objekt für Zeichenketten einsetzen, wird das Number-Objekt für Zahlen verwendet. Alle Zahlen, unabhängig davon, ob es sich um Ganz- oder Gleitkommazahlen handelt, werden in Number-Objekten abgelegt. Das Objekt Number besitzt Eigenschaften für numerische Konstanten. Die Werte dieser Eigenschaften können nicht geändert werden.
Beispiel
In den folgenden Anweisungen wird geprüft, ob die Multiplikation zweier Werte den maximalen Wertebereich von JavaScript überschreitet. Solange der Wert der Multiplikation kleiner als der Maximalwert ist, könnte in der ersten Funktion eine weitere Berechnung durchgeführt werden. Die zweite Funktion gibt stattdessen eine Meldung aus, in der auf den Überlauf des Wertebereichs hingewiesen wird.
if (Zahl1 * Zahl2 <= Number.MAX VALUE)
funktion1();
else
funktion2();
Des Weiteren können wir überprüfen, ob eine Variable in einem Wertebereich liegt. In diesem Beispiel liegt der Wert für die Variable monat nicht im Wertebereich zwischen 1 und 12. Die Variable monat wird auf einen ungültigen Wert gesetzt, indem ihr über die Eigenschaft Number. NaN der Wert NaN zugewiesen wird.
var monat = 13
if (monat<1 || monat>12) {
monat = Number.NaN
alert("Der Monatswert muss zwischen 1 und 12 liegen.");
}
Mit den folgenden Methoden können wir die Ausgabe von Zahlen formatieren. In Klammern wird eine Zahl angegeben, die die Genauigkeit der Ausgabe festlegt. Ohne eine Parameterangabe wird die Standardeinstellung verwendet.
Gibt man als Objekt den Wert als Literal an, so ist die Methode mit einem Leerzeichen Abstand anzugeben, z.B. 77 .toExponential() oder (77) . toExponential() statt 77.toExponential().
Beispiel: objekt_number.html
Ein Beispiel mit einigen Methoden des Objekts Number.
- objekt_number.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Objekt Number</title>
</head>
<body>
<h3>Ausgabe der Eigenschaften und Methoden</h3>
<script type="text/javascript">
document.write("<p>Number.MAX_VALUE: " , Number.MAX_VALUE);
document.write("<br>Number.MIN_VALUE: " , Number.MIN_VALUE);
document.write("<br>Number.NaN: " , Number.NaN);
document.write("<br>Number.NEGATIVE_INFINITY: " , Number.NEGATIVE_INFINITY);
document.write("<br>Number.POSITIVE_INFINITY: " , Number.POSITIVE_INFINITY);
var num=77.1234;
document.write("<hr>Wert von Variable num: ", num);
document.write("<br>num.toExponential() = " + num.toExponential());
document.write("<br>num.toExponential(4) = " + num.toExponential(4));
document.write("<br>num.toExponential(2) = " + num.toExponential(2));
document.write("<br>77.1234 .toExponential() = " + 77.1234 .toExponential())
document.write("<br>77 .toExponential() = " + 77 .toExponential());
var num=10.1234;
document.write("<hr>Wert von Variable num: ", num);
document.write("<br>num.toFixed() = " + num.toFixed());
document.write("<br>num.toFixed(4) = " + num.toFixed(4));
document.write("<br>10.1234 .toFixed(2) = " + 10.1234 .toFixed(2));
var num=1250;
document.write("<hr>Wert von Variable num: ", num);
document.write("<br>num.toPrecision() = " + num.toPrecision());
document.write("<br>num.toPrecision(4) = " + num.toPrecision(4));
document.write("<br>num.toPrecision(2) = " + num.toPrecision(2));
document.write("<br>num.toPrecision(1) = " + num.toPrecision(1));
document.write("<br>1250 .toPrecision(2) = " + 1250 .toPrecision(2));
document.write("<br>1250 .toPrecision(5) = " + 1250 .toPrecision(5));
</script>
</body>
</html>
Objekt Array für Variablenlisten
Ein Array (Feld) ist ein Speicherbereich, in dem wir mehrere Variablen speichern können. Der Zugriff auf die Variablen erfolgt über einen Bezeichner und einen Index. Da JavaScript nicht typisiert ist, können in einem Array auch Werte verschiedenen Typs gespeichert werden. Um beispielsweise die Daten von 20 Personen zu speichern, benötigen wir normalerweise 20 Variablen. Mit dem Array-Objekt können wir diese in einem einzigen Array speichern.
Indizierte Felder
Im Gegensatz zu den anderen vordefinierten Objekten muss ein Array explizit erzeugt werden. Es gibt drei verschiedene Möglichkeiten, ein Array-Objekt zu erzeugen.
* Wir erzeugen ein leeres Feld mit einer unbestimmten Länge. Die Feldelemente werden dann bei der ersten Zuweisung eines Wertes erzeugt. Die Länge des Feldes ergibt sich aus der Größe des letzten Index. Auf diese Weise lässt sich ein Feld dynamisch anlegen und vergrößern.
var Feldname = new Array(); // leeres Feld
Feldname[1] = 100;
Feldname[4] = "Test"; // die Feldlänge ist 5, da der Index bei 0 beginnt
Sie teilen bereits beim Erzeugen des Objekts mit, wie viele Elemente es enthalten wird.
var name = new Array(4); // das Feld wird 4 Elemente aufnehmen.
Wir können dem Array-Objekt bereits die gewünschten Werte zuweisen. Die einzelnen Werte werden mit Komma voneinander getrennt.
// dem Feld werden vier Namen zugewiesen
var name = ["Müller","Schmidt","Schulze","Lehmann"];
// oder
var name = new Array(4);
name[0] = "Müller";
name[1] = "Schmidt";
name[2] = "Schulze";
name[3] = "Lehmann";
Der Zugriff auf ein einzelnes Element des Feldes erfolgt über die Angabe eines Index, den Sie in eckigen Klammern angeben müssen. So erhalten Sie mit name[0] das erste Element des Feldes name, mit name [1] das zweite Element usw.
Assoziative Felder
Eine weitere Möglichkeit, Elemente von Feldern anzulegen und anzusprechen, sind assoziative Felder. Bei ihnen werden keine fortlaufenden Indizes zur Adressierung eines Eintrags im Array verwendet, sondern Zeichenketten.
var Stadt = new Array();
Stadt["Wohnort"] = "Frankfurt";
Stadt["Hauptstadt"] = "Berlin";
Stadt["Messestadt"] = "Leipzig";
Den Elementen können Sie dadurch eine beliebige Bezeichnung zuordnen, wobei der Zugriff auf die Feldelemente folgendermaßen erfolgt:
element = "Hauptstadt"; Stadtauswahl = Stadt[element];
oder über die Angabe der Zeichenkette:
Stadtauswahl = Stadt["Hauptstadt"];
Das Auslesen eines Elements wird direkt über dessen Bezeichnung realisiert. Dazu wird die Elementbezeichnung über eine Variable oder direkt in den eckigen Klammern des Feldes angegeben. In beiden Fällen der gezeigten Beispiele ist der Rückgabewert Berlin.
Methoden und Eigenschaften
Ein Array-Objekt besitzt nur die Eigenschaft length, womit die Anzahl der gespeicherten oder bei der In-stanziierung definierten Werte ausgelesen werden kann. Nach der Instanziierung var Feldname = new Array(4); liefert Feldname.length den Wert 4. Das letzte Element erhalten Sie direkt über die Angabe der Feldlänge, z.B. name[name.length-1].
Ein Objekt vom Typ Array() besitzt neben der Eigenschaft length auch mehrere Methoden, um auf die Feldelemente zuzugreifen.
Zusätzlich können wir in der Methode sort() eine Funktion hinterlegen, mit der Sie die Sortierungslogik (d. h. den Vergleich zweier Elemente) selbst durchführen können.
Beispiel
function sortiere(a, b) {
return a - b;
}
ArrayName.sort(sortiere);
Die Reihenfolge der Elemente wird gemäß der Sortierfunktion verändert. Die Sortierfunktion muss zwei Parameter entgegennehmen und eine Ganzzahl zurückliefern. Die Elemente des Arrays werden über diese Funktion verglichen und je nach Vorzeichen der Ganzzahl sortiert.
<0: Der zweite Wert ist kleiner als der erste.
=0: Beide Werte sind gleich.
>0: Der erste Wert ist kleiner als der zweite.
Wird keine Funktion angegeben, werden die Elemente nach ihren ASCII-Codes sortiert (auch Zahlen).
Die in der nachfolgenden Tabelle angegebenen Array-Methoden wurden ab JavaScript 1.6 implementiert.
Objekt Date für Zeitangaben
Auf die Systemzeit wird in JavaScript über das Date-Objekt zugegriffen. Instanzen des Objekts geben nicht nur das aktuelle Datum wieder, sondern sie lassen sich auch für beliebige Kalendertage und Uhrzeiten erzeugen und können so die verschiedensten Aufgaben erfüllen.
In JavaScript wird die Zeit, die seit dem 1. Januar 1970 um 0:00 Uhr vergangen ist, in Millisekunden gespeichert. Dies bedeutet, dass Sie kein Datum verarbeiten können, das vor diesem Zeitpunkt liegt.
Es gibt drei verschiedene Möglichkeiten, um ein Datumsobjekt zu initialisieren:
Werden bei der Initialisierung keine Parameter angegeben, so wird das Objekt mit dem aktuellen Datum und der aktuellen Uhrzeit initialisiert.
var Variable = new Date();
Wir können aber auch der Variablen ein bestimmtes Datum und eine Uhrzeit zuordnen. Dazu gibt man die entsprechenden Werte in Form einer Zeichenkette an.\\
var Variable = new Date("Monatsname_englisch Tag, Jahr Stunde:Minute:Sekunde")
Das Datum und die Uhrzeit lassen sich auch in numerischer Form angeben.
var Variable = new Date(Jahr, Monat, Tag, Stunde, Minute, Sekunde);
Beispiel
var zeitl = new Date(); // aktuelles Datum und Uhrzeit wird übergeben
var zeit2 = new Date("September 22, 2008 10:24:00'); // 22.09.2008 um 10:24 Uhr
var zeit3 = new Date(2008,8,22,10,24,00); // 22.09.2008 um 10:24 Uhr
Bei der Initialisierung in numerischer Form ist zu beachten, dass die Monate im Wertebereich von 0 bis 11 liegen (0 = Januar, 1 = Februar …11= Dezember). Außerdem können Sie die Parameter für die Angabe der Uhrzeit weglassen. Diese wird automatisch auf 0:00 Uhr gesetzt.
var zeit3 = new Date (2008,22); // 22.09.2008 um 0:00 Uhr
Methoden des Date-Objekts
Nach der Instanziierung eines Date-Objekts ist das in ihm gespeicherte Datum über seine Methoden zugänglich. Folgende Methoden stehen dazu zur Verfügung:
Über die folgenden Methoden können Sie das Datum in andere Formate umwandeln.
Es existieren außerdem die beiden Methoden parse() und utc(). Mit den Methoden parse(Datumszeichenkette) und utc(Jahr,Monat,Tag,Std.,Min.,Sek.) können wir Datumsangaben in Millisekunden ausgeben (UTC=Universal Time Coordinate). Beide Methoden stehen bei selbst definierten Date-Objekten nicht zur Verfügung. Um diese Methoden zu verwenden, muss die Schreibweise Date.parse(Parameter) bzw. Date.UTC(Parameter) verwendet werden.
Verwenden Sie nicht mehr die bisherige Methode getYear(). Da diese Methode nicht Jahr-2000-kompatibel ist, liefert sie in den Mozilla-Browsern nur die Differenz zum Jahr 1900 zurück. Die neue Methode getFullYear() liefert hingegen in allen Browsern das korrekte Jahr zurück.
Datumsangaben verändern
Mit den folgenden Methoden ändern Sie die Datumsangaben. Diese Änderungen sind nur innerhalb des JavaScripts gültig, die Systemzeit Ihres Computers wird dadurch nicht verändert.
Die Wertebereiche der Parameter entsprechen den Rückgabewerten der zugehörigen get-Methoden. Date-Objekte können zum Darstellen, Speichern und Berechnen von Zeitangaben verwendet werden.
Beispiel: objekt_date.html
Das folgende Beispiel enthält einige Methoden zum Auslesen und Manipulieren von Datum und Uhrzeit mit-hilfe von JavaScript. Weiterhin wird das Datum ermittelt und ausgegeben, das in 150 Tagen erreicht wird.
- objekt_date.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Objekt Date</title>
</head>
<body>
<h3> Die aktuelle Uhrzeit</h3>
<script type="text/javascript">
var zeit = new Date(); // Variable mit aktuellem Datum und Uhrzeit initialisieren
document.write("Datum, Uhrzeit: " + zeit.toLocaleString() + " Minuten<br>");
document.write("Jahr: " + zeit.getFullYear() + "; ");
document.write("Monat: " + zeit.getMonth() + "; "); /* Monate 0...11 */
document.write("Tag: " + zeit.getDate() + "; ");
document.write("Wochentag: " + zeit.getDay() + "; ");
document.write("Stunden: " + zeit.getHours() + "; ");
document.write("Minuten: " + zeit.getMinutes() + "; ");
document.write("Sekunden: " + zeit.getSeconds() + "<br> ");
document.write("Greenwichzeit: " + zeit.toGMTString() + "<br>");
document.write("Lokale Ausgabe: " + zeit.toLocaleString() + "<br>");
document.write("Abweichung: " + zeit.getTimezoneOffset() + " Minuten<br>");
jahr = zeit.getFullYear();
monat = zeit.getMonth() + 1;
tag = zeit.getDate();
document.write("Heute ist der " + tag + "." + monat + "." + jahr + "<br>");
dann = zeit.getTime() + (150*24*60*60*1000); // 150 Tage in Millisekunden umrechnen
/* Zeit auf neues Datum (+150 Tage) setzen */
zeit.setTime(dann);
document.write("In 150 Tagen ist " + zeit.toLocaleString() + "<br>");
</script>
</body>
</html>
Obwohl die Berechnung korrekt durchgeführt wurde, liegt die Uhrzeit in 150 Tagen eine Stunde hinter der aktuellen Uhrzeit. Dies liegt an der zwischendurch auftretenden Umstellung von der Sommer- auf die Winter-zeit.
Beispiel: objekt_date2.html
Im nächsten Beispiel soll das aktuelle Datum formatiert und ausgegeben werden. Im Zusammenhang mit dem Date-Objekt können Sie statt der bisherigen numerischen Tages- und Monatsausgabe in Verbindung mit einem Array-Objekt die entsprechenden Wochentags- und Monatsnamen zuweisen und ausgeben lassen.
- objekt_date2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Objekt Date</title>
</head>
<body>
<h3>Name des aktuellen Wochentags und Monats</h3>
<script type="text/javascript">
var zeit = new Date();
var Tag = zeit.getDate();
var Wtag = zeit.getDay();
var Monat = zeit.getMonth();
var Jahr = zeit.getFullYear();
WochenTagName = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
MonatsName = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
document.write("Standardausgabe des Datums:<BR>Heute ist der " + Wtag + ".Wochentag, " + Tag + "." + (Monat+1) + "." + Jahr + ".<BR><BR>");
document.write("Ausgabe des Datums mit Hilfe zweier Arrays:<BR>Heute ist " + WochenTagName[Wtag] + ", der " + Tag + ". " + MonatsName[Monat] + " " + Jahr + ".");
</script>
</body>
</html>
Objekt RegExp für reguläre Ausdrücke
Die regulären Ausdrücke, auch RegExpressions genannt, erlauben es, Zeichenketten zu vergleichen. Sie können verwendet werden, um zu überprüfen, ob z. B. die Eingabe einer E-Mail-Adresse in einem Formularfeld eine gültige Adresse ist oder ob eine Telefonnummer die korrekte Formatierung hat.
Im Internet finden Sie zahlreiche Informationen zu regulären Ausdrücken. Geben Sie beispielsweise in der Suchmaschine http://www.google.de die Anfrage „reguläre +Ausdrücke +Tutorial“ ein.
JavaScript besitzt seit der Version 1.2 das Objekt RegExp. Das Objekt dient dazu, Instanzen zu erzeugen, mit denen reguläre Ausdrücke verarbeitet werden können, und es dient der Überwachung der Ergebnisse solcher Operationen. Das statische Objekt RegExp speichert in seinen Eigenschaften Informationen über die zuletzt durchgeführte Operation mit einem regulären Ausdruck. Auch Methoden des string-Objekts wie match(), replace() und search() verwenden implizit die regulären Ausdrücke.
Aufbau eines regulären Ausdrucks
Reguläre Ausdrücke sind Muster (Patterns), die auf eine Zeichenkette angewendet werden. Ein gewöhnliches Muster besteht aus drei Teilen, dem Pattern, den Flags und den Begrenzern(/).
/Pattern/Flag
Die Schrägstriche sind sogenannte Delimiter (Begrenzer), die den Anfang und das Ende des Musters kennzeichnen. Ein Delimiter darf jedes beliebige nicht alphanumerische Zeichen (außer dem Schrägstrich) sein. Das Pattern ist der Hauptteil, welches das Suchmuster beinhaltet. Der letzte Teil besteht aus den Flags, die das Suchmuster beeinflussen.
Instanzen aus regulären Ausdrücken erzeugen
var Suchel = /sel/
var Suche2 = new RegExp("sel")
Der einfachste Weg ist es, einer Variablen einen regulären Ausdruck zuzuweisen. Die erste Instanziierung verwenden Sie, wenn das Suchmuster nicht verändert werden muss. Die zweite Variante sollten Sie anwenden, wenn das Suchmuster innerhalb des Skripts geändert wird. In beiden Fällen wird die erste Fundstelle gesucht, die die Zeichenkette sei enthält.
Flags
Einem Ausdruck können Sie die beiden Flags g und i anfügen.
g bedeutet, dass die Suche nach dem Ausdruck global erfolgen soll. Nach dem ersten Treffer wird die Suche fortgesetzt, sodass mehrere Treffer gefunden werden können.
i lässt bei der Suche die Groß- und Kleinschreibung unberücksichtigt.
var Suche = /sel/gi
Für die Definition des Musters können Sie Metazeichen verwenden, die bestimmte Sonderfälle markieren. Folgende Metazeichen werden von JavaScript interpretiert:
Mit den nachfolgenden Metazeichen geben Sie die Häufigkeit des Suchbegriffs an.
Wollen Sie nach den Zeichen . [ ] * ? { } ( ) ^ oder $ suchen, müssen diese mit einem Backslash \ eingeleitet werden, da sie ansonsten als Metazeichen interpretiert werden. Das gilt auch für den Backslash selbst. Nach ihm wird mit einem doppelten Backslash gesucht \\, z.B:
var Suche = /\D:\\Daten\\Grafiken\\Apfel\.GIF/i;
Dieses Suchmuster passt beispielweise auf die Zeichenkette D:\DATEN\Grafiken\aPfel.gif, da die Groß-und Kleinschreibung nicht beachtet wird.
Methoden
Damit Sie eine Suche durchführen können, verwenden Sie die Methoden des regulären Ausdrucks.
Beispiel: objekt_regexp.html
Es wird eine vorgegebene Zeichenkette nach dem Auftreten bestimmter Suchmuster verarbeitet.
- objekt_regexp.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Objekt RegExp</title>
</head>
<body>
<h3>Methoden von RegExp()</h3>
<script type="text/javascript">
var Text = "Frau Klößer hat Bücher im Wert von 49,90€ bestellt und muss diese innerhalb der nächsten 14 Tage bezahlen.";
document.write("<b>Vorgabewert:<\/b><br>" + Text);
Suche = /\d\d/;
document.write("<hr>Suche nach der ersten zweistelligen Zahl<br>");
document.write(Suche.test(Text) + "<br>");
document.write(Suche.exec(Text));
Suche = /\d{1,}\sTage/;
document.write("<hr>Suche nach dem Wort \"Tage\" mit vorangesetzter Zahl<br>");
document.write(Suche.test(Text) + "<br>");
document.write(Suche.exec(Text));
Suche = /[MWG]ut/;
document.write("<hr>Suche nach \"Mut\", \"Wut\" oder \"Gut\"<br>");
document.write(Suche.test(Text) + "<br>");
document.write(Suche.exec(Text));
Suche = /(\d{1,},\d{2})€/;
document.write("<hr>Suche nach einer Preisangabe mit zwei Kommastellen<br>");
document.write(Suche.test(Text) + "<br>");
document.write(Suche.exec(Text));
</script>
</body>
</html>
Die Instanz des regulären Ausdrucks besitzt weitere vier Eigenschaften, die bei der Verwendung der Flags gesetzt werden:
global enthält true oder false, je nachdem, ob das Flag g gesetzt ist oder nicht.
ignoreCase enthält true oder false, je nachdem, ob das Flag i gesetzt ist oder nicht.
lastindex enthält den Index des ersten Buchstabens, bei dem der nächste Suchdurchlauf des Musters beginnt. In einer neuen Suche ist der Wert 0. Ändern Sie diesen Wert, um die Suche an einer anderen Position zu beginnen.
source enthält das Suchmuster als String ohne die beiden Schrägstriche.
Eigenschaften von RegExp
Jedes Mal, wenn wir einen regulären Ausdruck anwenden, werden die Ergebnisse der Operation in den Eigenschaften des RegExp-Objekts abgelegt. Die Benennung der Eigenschaften erfolgt über die $-Variablen oder über den entsprechenden ausgeschriebenen Namen.
Reguläre Ausdrücke im string-Objekt
Das string-Objekt besitzt Methoden zum Durchsuchen und Verändern von Zeichenketten. Die Suchmuster lassen sich über die regulären Ausdrücke festlegen.
Bei der Angabe des regulären Ausdrucks müssen Sie beachten, dass dieser im Gegensatz zum RegExp-Objekt als Parameter in Klammern angegeben wird.
Beispiel: objekt_regexp_multi.html
Es wird eine vorgegebene Zeichenkette nach dem Auftreten bestimmter Suchmuster verarbeitet.
- objekt_regexp_multi.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<title>Objekt RegExp</title>
</head>
<body>
<script type="text/javascript">
var Text = "Frau Klößer hat mehrere Buchbestellungen im Wert von 49.90€, 149.90€, 65.35€ und 400.00€ aufgegeben.";
document.write(Text + "<br><br><b>Die Bestellwerte im einzeln:<\/b><br><hr>");
SuchAusdruck = /\d*.\d*€/g;
Bestellwerte = Text.match(SuchAusdruck);
for(i = 0; i < Bestellwerte.length; i++)
document.write(Bestellwerte[i] + "<br>");
</script>
</body>
</html>
