Websiteentwicklung: JavaScript: Objekte: Boolean, Date, Number
Wahrheitswerte / Boolean
[Bearbeiten]Mit der Konstruktorfunktion „Boolean“ kann man ein Objekt erzeugen, das die boolschen Werte
- true - wahr
- false - falsch
kapselt.
Syntax:
var bWahreVariable = new Boolean(true);
var typ = typeof bWahreVariable; // typ === 'object'
Warnung! Die von new Boolean() zurückgegebene Variable ist natürlich ein Objekt, und der typeof-Operator gibt "object" zurück.
Besser, kürzer, schöner ist daher die Definition als Literal:
var bWahreVariable = true; // erfüllt den gleichen Zweck auch ohne Objekt
var typ = typeof bWahreVariable; // typ === 'boolean'
Datum / Date
[Bearbeiten]Das Datums-Objekt dient zum Auslesen und Berechnen von Zeit und Datum und wird mit folgender Syntax erzeugt:
var dJetzt = new Date(); /* weist dem Date-Objekt "dJetzt" die aktuelle Systemzeit
bzw. das aktuelle System-Datum zu */
var dDatum = new Date("Monat Tag, Jahr Stunden:Minuten:Sekunden");
/* erzeugt ein Date-Objekt mit den übergebenen Parametern */
var dDatum = new Date(Jahr, Monat, Tag); /* erzeugt ein Date-Objekt mit den übergebenen
Datums-Parametern und den Zeit-Parametern 00:00:00 */
var dDatum = new Date(Jahr, Monat, Tag, Stunden, Minuten, Sekunden);
/* erzeugt ein Date-Objekt mit den übergebenen Parametern */
var dDatum = new Date(Millisekunden); /* erzeugt ein Date-Objekt mit dem übergebenen Parameter.
Die Angabe Millisekunden beruht auf der Berechnung der
Millisekunden seit dem 01.01.1970 / 00:00:00 Uhr */
Für den Zugriff auf verschiedene Bestandteile des Datums existieren verschiedene Methoden:
- get-Methoden um das Date-Objekt oder seine Teile auszulesen
- set-Methoden um dem Date-Objekt neue Werte zuzuweisen
- to-Methoden um die Ausgabe des Date-Objektes zu formatieren
- parse() und UTC() - im Prinzip get-Methoden für spezielle Zwecke
Bitte unbedingt beachten :
- Alle Methoden des Date-Objektes beziehen sich auf den Client-Rechner des Internet-Users. Eine Möglichkeit, Zeit oder Datum des Web-Servers auszulesen ist in JavaScript nicht gegeben.
- Die set-Methoden des Date-Objektes setzen nur den Wert eines im Skript erzeugten Date-Objektes, nicht aber die Systemzeit des Client-Rechners.
- die set-Methoden erwarten, zumindest bei Nutzung eines einfach per var myDate=new Date() erstellten Datumsobjektes OKTALWERTE. Bei Nutzung des o.g. Konstruktors werden jedoch Dezimalwerte erwartet.
- Januar ist Monat 0, Dezember Monat 11.
get-Methoden
[Bearbeiten]Grundsätzlich gibt es zwei Arten die Zeit abzufragen, entweder auf Basis der lokalen Zeitangabe oder basierend auf GMT (Greenwich Mean Time). Nachfolgend werden die Methoden zur Abfrage der lokalen Zeit gelistet.
| Methodename | Kurzbeschreibung |
|---|---|
| getTimezoneOffset() | Gibt die Differenz zwischen Lokalzeit und GMT zurück. Ein Gegenstück dazu als set-Methode gibt es nicht! |
| getYear() | Gibt die Jahreszahl zurück (Achtung: „Internet Explorer“ vierstellige „normale“ Jahreszahl - „Netscape“ und „Firefox“ z.B. als Jahre ab 1900! - das Jahr „2006“ also als „106“ !!!) - sicherer ist es in jedem Falle, die Methode getFullYear() zu verwenden! Um das Chaos zu komplettieren, erwartet das Gegenstück dieser Methode - die Methode „setYear()“ die Jahreszahl in allen Browsern als „normale“ vierstellige Jahreszahl. Eine Eingabe als „106“ würde das Jahr „-1794“ generieren. |
| getFullYear() | gibt die Jahreszahl immer als normale vierstellige Jahreszahl zurück. Achtung: Ein Gegenstück „setFullYear()“ gibt es zwar - diese Aufgabe erfüllt aber bereits die Methode „setYear()“, die als Parameter ebenfalls das Jahr in „normaler“, vierstelliger Form erwartet. |
| getMonth() | Gibt den Monat als ganzzahligen Wert zwischen 0 (Januar) und 11 (Dezember) zurück. |
| getDate() | Gibt die Tageszahl als ganzzahligen Wert zwischen 1 und 31 zurück. |
| getDay() | Gibt den Wochentag ( 0 = Sonntag , 1 = Montag, ... , 6 = Samstag) zurück. Von dieser Methode gibt es weder ein UTC-Gegenstück noch ein Gegenstück unter den set-Methoden. |
| getTime() | Gibt die Anzahl Millisekunden zurück, die seit dem 1. Januar 1970, 0:00:00 Uhr (UTC) bis zum Zeitpunkt des Date-Objektes vergangen sind. |
| getHours() | Gibt die Stundenzahl als ganzzahligen Wert zwischen 0 und 23 zurück. |
| getMinutes() | Gibt die Minutenzahl als ganzzahligen Wert zwischen 0 und 59 zurück. |
| getSeconds() | Gibt die Sekundenzahl als ganzzahligen Wert zwischen 0 und 59 zurück. |
| getMilliseconds() | Gibt die Anzahl der Millisekunden seit der letzten vollen Sekunde als ganzzahligen Wert zwischen 0 und 999 zurück. |
Die Methoden zur Abfrage der Zeit mit Bezug zur Zeitbasis GMT (Greenwich Mean Time) laufen analog zu den oben geschilderten Methoden ab. In der Syntax gibt es keinerlei Unterschiede, um zu verdeutlichen, dass GMT die Zeitbasis ist, heißen die Methoden getUTC (für koordinierte Weltzeit, englisch Universal Time, Coordinated, kurz UTC). Die entsprechenden JavaScript-Methoden heißen demnach dann:
- getUTCYear()
- getUTCFullYear()
- getUTCMonth()
- getUTCDate()
- getUTCTime()
- getUTCHours()
- getUTCMinutes()
- getUTCSeconds()
- getUTCMilliseconds()
Ein kleines Beispiel
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Das Date - Objekt</title>
<meta name="author" content="S.Möller">
<script type="text/javascript" language="JavaScript">
<!--
function fGetDate()
{
var nD = new Date();
fDisplayDate(nD);
}
function fDisplayDate(dd)
{
var m="";
m=m + "Tag : " + dd.getDate()+ "\n";
m=m + "Monat : " + dd.getMonth()+ "\n";
m=m + "Jahr : " + dd.getYear()+ "\n";
m=m + "Volles Jahr : " + dd.getFullYear()+ "\n";
m=m + "Stunden : " + dd.getHours()+ "\n";
m=m + "Minuten : " + dd.getMinutes()+ "\n";
m=m + "Sekunden : " + dd.getSeconds()+ "\n";
m=m + "Millisekunden : " + dd.getMilliseconds()+ "\n";
m=m + "Wochentag : " + dd.getDay()+ "\n";
alert(m);
}
//-->
</script>
<noscript>Bitte schalten Sie JavaScript ein !</noscript>
</head>
<body>
<h3>Das Date - Objekt</h3>
<form action="JavaScript_DateObject.html" method="post" target="" name="Form1">
<input type="Button" name="btnGetTime" value="Zeit + Datum ausgeben" onClick="fGetDate()">
</form>
</body>
</html>
set-Methoden
[Bearbeiten]Auch für die set-Methoden gibt es jeweils zwei unterschiedliche Varianten, was die Zeitbasis betrifft. Die set-Methoden des Date-Objektes setzen nur den Wert eines im Skript erzeugten Date-Objektes, nicht aber die Systemzeit des Client-Rechners.
set Lokale Zeit
[Bearbeiten]- setYear() erwartet eine „normale“ vierstellige Jahreszahl als Parameter und übergibt diese dem Date-Objekt
- setFullYear() erwartet eine „normale“ vierstellige Jahreszahl als Parameter und übergibt diese dem Date-Objekt (wie „setYear()“)
- setMonth() erwartet einen ganzzahligen Wert zwischen 0 (Januar) und 11 (Dezember) und übergibt diesen an den Monat des Date-Objektes
- setDate() erwartetet einen ganzzahligen Wert zwischen 1 und 28-31 (je nach Monat) und übergibt diesen an das Tagesdatum des Date-Objektes
- setTime() erwartet eine Zahl als Anzahl Millisekunden seit dem 01.01.1970 00:00:00 (UTC) und setzt diesen Wert in das entsprechende Datum um.
- setHours() erwartet einen ganzzahligen Wert zwischen 0 und 23 und übergibt diesen an die Stunden des Date-Objektes
- setMinutes() erwartet einen ganzzahligen Wert zwischen 0 und 59 und übergibt diesen an die Minuten des Date-Objektes
- setSeconds() erwartet einen ganzzahligen Wert zwischen 0 und 59 und übergibt diesen an die Sekunden des Date-Objektes
- setMilliseconds() erwartet einen ganzzahligen Wert zwischen 0 und 999 und übergibt diesen an die Millisekunden des Date-Objektes
set Koordinierte Weltzeit (UTC)
[Bearbeiten]Die setUTC-Methoden laufen analog zu den oben geschilderten Methoden ab, nur dass sie sich als Zeitbasis auf die GMT (Greenwich Mean Time) beziehen. In der Syntax gibt es keinerlei Unterschiede. Da setTime() bereits eine Angabe in UTC (co-ordinated universal time, Koordinierte Weltzeit) erwartet, fehlt das Gegenstück setUTCTime().
- setUTCYear()
- setUTCFullYear()
- setUTCMonth()
- setUTCDate()
- setUTCHours()
- setUTCMinutes()
- setUTCSeconds()
- setUTCMilliseconds()
to-Methoden
[Bearbeiten]- toGMTString() erzeugt einen String mit Zeit- und Datumsangaben der UTC(GMT)-Zeit
- toLocalString() erzeugt einen String mit Zeit- und Datumsangaben der Lokal-Zeit
Ein kleines Beispiel:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Das Date - Objekt</title>
<meta name="author" content="S.Möller">
<script language="JavaScript">
<!--
function fGetLDate()
{
var nd=new Date();
alert(nd.toLocaleString());
}
function fGetGDate()
{
var nd=new Date();
alert(nd.toGMTString());
}
//-->
</script>
<noscript>Bitte schalten Sie JavaScript ein !</noscript>
</head>
<body>
<h3>Das Date - Objekt</h3>
<form action="JavaScript_DateObjectTo.html" method="post" target="" name="Form1">
<input type="Button" name="btnGetLocalTime" value="Lokal-Zeit + Datum ausgeben" onClick="fGetLDate()">
<input type="Button" name="btnGetGMTTime" value="GMT-Zeit + Datum ausgeben" onClick="fGetGDate()">
</form>
</body>
</html>
parse() und UTC()
[Bearbeiten]- parse() errechnet aus der übergebenen Zeichenkette ("Mon, 27 Mar 2006 13:15:30 GMT") die Anzahl Millisekunden, die zwischen dem 01.01.1970, 00:00:00 Uhr GMT und dem als Parameter übergebenen Zeitpunkt vergangen sind. Der Aufruf dieser Methode benötigt kein neues Date-Objekt, sondern kann direkt als
var mS = Date.parse("Mon, 27 Mar 2006 13:15:30 GMT")
erfolgen
- UTC() gibt die Anzahl Millisekunden zurück, die zwischen dem 01.01.1970 00:00:00 Uhr und einem als Parameter übergebenen Zeitpunkt verstrichen sind. Die Parameter werden als Zahlen übergeben. Die Angabe der Uhrzeitwerte ist optional - bei Fehlen werden Sie alle als 0 angenommen. Die Parameter müssen in der Reihenfolge Jahr, Monat, Tag [,Stunde, Minute, Sekunde] übergeben werden. Der Zeitpunkt wird als UTC-Zeitpunkt angenommen.
Syntax:
var mS = Date.UTC(Jahr, Monat, Tag [,Stunde,Minute,Sekunde])
Nummerische Werte / Number
[Bearbeiten]Das Number-Objekt verfügt über 5 Eigenschaften und 4 Methoden und erlaubt Gültigkeits-Prüfungen sowie verschiedene Zahldarstellungen und Konvertierungen.
- Eigenschaften
- MAX_VALUE
- MIN_VALUE
- NaN
- NEGATIVE_INFINITY
- POSITIVE_INFINITY
- Methoden
- toExponential()
- toFixed()
- toPrecision()
- toString()
Die Programmbeispiele zu Eigenschaften und Methoden des Number-Objektes sind in einem einzigen Skript mit 8 Buttons und 11 Textfeldern zusammengefasst (wird am Ende dieses Abschnittes vorgestellt).
Eigenschaften
[Bearbeiten]Die Eigenschaften des Number-Objektes sind Konstanten, es kann also nur lesend darauf zugegriffen werden. Der Zugriff geschieht mit folgender Syntax:
Number.Eigenschaft
zum Beispiel:
alert(Number.MAX_VALUE);
alert(Number.MIN_VALUE);
alert(Number.NaN);
alert(Number.NEGATIVE_INFINITY);
alert(Number.POSITIVE_INFINITY);
MAX_VALUE
[Bearbeiten]„MAX_VALUE“ bezeichnet die größte, von JavaScript darstell- und berechenbare Zahl. Mit
var x = Number.MAX_VALUE
könnte Sie einer Variablen zugewiesen und z.B über alert() dargestellt werden. Wenn sich durch Berechnungen eine größere Zahl ergibt, gibt JavaScript den Wert „Infinity“ aus. Der Wert ist nicht für Vergleichs-Prüfungen geeignet, ob ein Wert möglicherweise zu groß ist. Dafür muss die objektunabhängige Funktion „isFinite()“ verwendet werden.
MIN_VALUE
[Bearbeiten]„MIN_VALUE“ bezeichnet die kleinste, positive, von JavaScript darstell- und berechenbare Zahl größer als „0“. Mit
var x = Number.MIN_VALUE
könnte Sie einer Variablen zugewiesen und z.B über alert() dargestellt werden. Wenn sich durch Berechnungen eine kleinere Zahl ergibt, gibt JavaScript den Wert „0“ aus. Auch dieser Wert ist nicht für Vergleichs-Prüfungen geeignet. „Number.MIN_VALUE“ ist nicht (!) die kleinste negative Zahl
NaN
[Bearbeiten]„NaN“ wird ausgegeben, falls eine Rechenoperation auf einen nicht wandelbaren String oder ein Objekt angewendet wird. Auch Number.NaN ist nicht für Prüfungen und Vergleiche geeignet - dafür existieren die objektunabhängigen Funktionen „isNaN()“ (die für Zahlen „false“ und für alles andere „true“ zurück liefert) und „Number()“ (die entweder eine Zahl oder „NaN“ zurück liefert).
NEGATIVE_INFINITY
[Bearbeiten]„NEGATIVE_INFINITY“ ist die Ausgabe-Konstante mit dem Text „-Infinity“. JavaScript gibt diesen Wert aus, falls die Zahl negativ und der Absolutwert größer als „Number.MAX_VALUE“ ist. „NEGATIVE_INFINITY“ ist nicht (!) die Ausgabekonstante für Zahlen kleiner als „Number.MIN_VALUE“
POSITIVE_INFINITY
[Bearbeiten]„POSITIVE_INFINITY“ ist die Ausgabe-Konstante mit dem Text „Infinity“. JavaScript gibt diesen Wert aus, falls die Zahl größer als „Number.MAX_VALUE“ ist.
Methoden
[Bearbeiten]Die Nutzung der Methoden des Number-Objektes läuft etwas anders ab als die Nutzung der Konstanten. Wurden die Konstanten mit dem Schlüsselwort „Number“, dem angehängten Punkt und dem Eigenschaftsnamen abgerufen, so verwenden die Methoden das konkrete Objekt - das heißt die Zahl. Wenn Sie eine nummerische Variable definieren - gleich ob mit oder ohne „var“-Anweisung, so werden die Methoden anschließend mit „Variable.Methode“ aufgerufen.
toExponential()
[Bearbeiten]Die Methode „toExponential()“ wandelt die Zahldarstellung in die Exponential-Darstellung:
- 12345.6789 wird zu 1.23456789e+4
toFixed()
[Bearbeiten]Die Methode „toFixed(NK)“ wandelt die Zahldarstellung in eine Fixkomma-Darstellung mit „NK“ Nachkommastellen:
- bei 3.14159 und NK=2 erscheint 3.14, bei NK=3 erscheint 3.142, die Methode rundet kaufmännisch.
toPrecision()
[Bearbeiten]Die Methode „toPrecision(P)“ wandelt die Zahldarstellung in eine Gleitkomma-Darstellung mit „P“ Stellen - eventuell in Exponentialschreibweise:
- bei 12345.6789 und P=8 erscheint 12345.679, bei P=3 erscheint 1.23e+4, auch diese Methode rundet kaufmännisch.
toString()
[Bearbeiten]Die Methode „toString([B])“ wandelt eine Zahl in eine Zeichenkette, z.B. um sie später mit Methoden des String-Objektes zu verarbeiten. Mit dem - optionalen - Parameter „B“ kann eine ganzzahlige Basis des Zahlsystems mitgegeben werden. Wenn B nicht kleiner als 2 und nicht größer als 36 ist, wird die Zahl in eine Darstellung im entsprechenden Zahlsystem gewandelt. Für die Rückwandlung von anderen Zahlensystemen ins Dezimalsystem stellt das Number-Objekt keine Funktion zur Verfügung. Zu diesem Zweck müssen Sie auf die Methode parseInt() zurückgreifen.
Programm-Beispiel
[Bearbeiten]Im folgenden - beinahe selbsterklärenden und ausführlich kommentierten - Beispiel werden alle Eigenschaften und Methoden des Number Objektes angewendet. Die oberen 4 Buttons nutzen die 5 Eigenschaften, die unteren 4 Buttons die 4 Methoden.
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript Number</title>
<meta name="description" content="JavaScript Number-Objekt">
<meta name="author" content="S.Möller">
<meta name="keywords" content="JavaScript,Number-Objekt">
<script language="JavaScript">
<!--
function fMaxNumber()
{
/* Der Variablen "Max" wird Number.MAX_VALUE zugewiesen,
die Zahl wird ausgegeben, dann wird Max mit 2 multipliziert.
Das Ergebnis ist natürlich zu groß !! */
var Max=Number.MAX_VALUE;
alert("Max = " + Max);
Max=2*Max;
alert("2 x Max = " + Max);
}
function fMinNumber()
{
/* Der Variablen "Min" wird Number.MIN_VALUE zugewiesen,
die Zahl wird ausgegeben, dann wird Min durch 10 dividiert.
Das Ergebnis ist dann "0" !! */
var Min=Number.MIN_VALUE;
alert("Min = " + Min);
Min=Min/10;
alert("Min / 10 = " + Min);
}
function fNaN()
{
/* Der Ausdruck (3 * "A") kann nicht berechnet werden, weil
"A" nicht in eine Zahl konvertiert werden kann.
Deshalb wird "NaN" ausgegeben !!!
Die Prüfung mit isNaN() ergibt "true"!!! */
alert(3 * "A");
alert("isNaN(3 x 'A') = " + isNaN(3 * "A"));
}
function fInf()
{
/* Der Einsatz der Konstanten
POSITIVE_INFINITY und NEGATIVE_INFINITY
wird demonstriert.
Außerdem die Prüfung mit Hilfe der Funktion "isFinite()" */
var Max=Number.POSITIVE_INFINITY;
alert("Positiv Unendlich = " + Max);
alert("isFinite(Number.POSITIVE_INFINITY) = " + isFinite(Max));
var Min=Number.NEGATIVE_INFINITY;
alert("Negativ Unendlich = " + Min);
alert("isFinite(Number.NEGATIVE_INFINITY) = " + isFinite(Min));
}
function fExp()
{
/* Die Zahl aus dem Textfeld links wird rechts
in Exponentialschreibweise dargestellt! */
with(document.Form1)
{
var x1=parseFloat(txtZahl1.value);
txtZahl2.value=x1.toExponential();
}
}
function fFix()
{
/* Die Zahl aus dem Textfeld links wird rechts
mit einer wählbaren Anzahl von Nachkommastellen dargestellt! */
with(document.Form1)
{
var NK=parseInt(txtNachKomma.value);
var x1=parseFloat(txtZahl3.value);
txtZahl4.value=x1.toFixed(NK);
}
}
function fPrec()
{
/* Die Zahl aus dem Textfeld links wird rechts
mit einer wählbaren Genauigkeit dargestellt! */
with(document.Form1)
{
var PR=parseInt(txtPrec.value);
var x1=parseFloat(txtZahl5.value);
txtZahl6.value=x1.toPrecision(PR);
}
}
function fString()
{
/* Die Zahl aus dem Textfeld links wird in einen String gewandelt.
Dabei kann zusätzlich die Darstellung in einem anderen Zahlsystem
(Binär, Oktal, Hexadezimal, ...) erfolgen, wenn die Basis des
Zahlsystems als Parameter mit übergeben wird. Ohne Parameter
wird die Basis 10 verwendet. Die größte verwendbare Basis ist 36.
(Oberhalb 36 geht wohl der Zeichenvorrat aus (0-9, A-Z)!! */
sZ=""
with(document.Form1)
{
var B=parseInt(txtBasis.value);
if(B<2)
{
B=2;
}
if(B>36)
{
B=36;
}
txtBasis.value=B;
var x1=parseFloat(txtZahl7.value);
sZ=x1.toString(B);
sZ=sZ.toUpperCase();
txtZahl8.value=sZ;
}
}
function fLoad()
{
/* belegt ein Textfeld mit Math.PI (3.14159 ...) vor und
führt einige Berechnungen schon einmal durch !! */
with(document.Form1)
{
txtZahl3.value=Math.PI;
fExp();
fFix();
fPrec();
fString();
}
}
//-->
</script>
<noscript></noscript>
</head>
<body onLoad="fLoad()">
<h3>JavaScript - Number-Objekt</h3>
<form action="JavaScript_Number.html" method="post" target="" name="Form1">
<input type="button"
name="btnMaxTest"
value="Max-Test"
onClick="fMaxNumber()">
</input>
<input type="button"
name="btnMinTest"
value="Min-Test"
onClick="fMinNumber()">
</input>
<input type="button"
name="btnNaNTest"
value="NaN-Test"
onClick="fNaN()">
</input>
<input type="button"
name="btnInfTest"
value="INF-Test"
onClick="fInf()">
</input>
<br>
<br>
<input type="text"
name="txtZahl1"
value="123456789.123456789"
size="25">
</input>
<input type="button"
name="btnExp"
value="Exponentialschreibweise"
onClick="fExp()">
</input>
<input type="text"
name="txtZahl2"
value=""
size="30">
</input>
<br>
<br>
<input type="text"
name="txtZahl3"
value=""
size="25">
</input>
<input type="text"
name="txtNachKomma"
value="2"
maxlength="1"
size="2">
</input>
<input type="button"
name="btnFixed"
value="Fix-Komma"
onClick="fFix()">
</input>
<input type="text"
name="txtZahl4"
value=""
size="30">
</input>
<br>
<br>
<input type="text"
name="txtZahl5"
value="12345.67890"
size="25">
</input>
<input type="text"
name="txtPrec"
value="7"
maxlength="2"
size="2">
</input>
<input type="button"
name="btnPrec"
value="Genauigkeit"
onClick="fPrec()">
</input>
<input type="text"
name="txtZahl6"
value=""
size="30">
</input>
<br>
<br>
<input type="text"
name="txtZahl7"
value="65535"
size="25">
</input>
<input type="text"
name="txtBasis"
value="16"
maxlength="2"
size="2">
</input>
<input type="button"
name="btnString"
value="Zahl zur Basis als String"
onClick="fString()">
</input>
<input type="text"
name="txtZahl8"
value=""
size="30">
</input>
<br>
<br>
</form>
</body>
</html>
Aufgaben + Lösungen
[Bearbeiten]