Vordefinierte Objekte

JavaScript stellt eine Reihe von vordefinierten Objekten zur Verfügung. Die Instanzierung eines vordefinierten Objektes wird mit dem Schlüsselwort new erstellt. Das Objekt Math hat keinen Konstruktor und kann direkt verwendet werden.

Die Syntax

Die Syntax ist für alle Objekte dieselbe mit der Ausnahme des Math()-Objects. Das Objekt wird an eine Variable übergeben und mit dem Schlüsselwort new instanziert. Das Math()-Object kennt das Schlüsselwort new nicht.

var myStr = new String("Hallo Welt!");
var myPI = Math.PI; 

Verwenden sie die Browser-Konsole um JavaScript Code auf dieser Seite zu testen.

String-Object

String sind in JavaScript sogenannte Primitives können aber auch Objekte sein. Eine Deklaration wie:

var myStr = "Hallo Welt!";
var myObj = new String("Hallo Welt!");

ist eigentlich dasselbe, nur wenn wir beide Variablen mit typeof() testen erkennen wir den Unterschied:

console.log(typeof(myStr)); // liefert string
console.log(typeof(myObj)); // liefert object

Die Deklaration eines einfacher Strings wird auch literale Schreibweise genannt. Obwohl Primitives im engsten Sinn keine Objekte sind, stehen trotzdem alle Methoden und Eigenschaften zur Verfügung.

String Methoden und Eigenschaften

String Methoden und Eigenschaften werden von JavaSript Programmierer häufig gebraucht, ein paar einfache Beispiele habe ich hier:

Whitespace entfernen mit trim()

Das String-Object kennt auch die length-Eigenschaft, diese liefert dia Anzahl von Zeichen in einem String (auch Leerzeichen). Mit der trim()-Methode werden Leerezeichen am Beginn und am Ende eines String entfernt.

var x = "   Hallo" +
"Welt!  ";
console.log(x.length);
x = x.trim();
console.log(x.length);

Teilstring mit substr()

Mit der substr()-Methode wird aus einem String ein Teilstring extrahiert. Das erste Argument ist die Startposition, das zweite Argument bestimmt die Anzahl der Zeichen ab der Startposition.

var x = "Hallo Welt!"
var y = x.substr(1, 4); 
console.log(y); // liefert allo

Teilstring mit substring()

Auch mit der substring()-Methode wird aus einem String ein Teilstring extrahiert, der zwischen ersten und zweiten Argument liegt.

var x = "Hallo Welt!"
var y = x.substring(1, 4);
var z = x.substr(1, 4);
console.log(y); // liefert all
console.log(z); // liefert allo

String ersetzen mit replace()

Mit der replace()-Methode wird ein teilstring, der im ersten Argument definiert wird, durch einen String des zweiten Arguments ersetzt.

var x = "Hallo Welt!";
var y = x.replace("Welt", "Adi Prinz"); 
console.log(y); // liefert Hallo Adi Prinz!

String in Array mit split()

Mit der split()-Methode wird ein String anhand eines Separators (irgendein Zeichen) in ein Array aufgeteilt. Im Beispiel wird das Leerzeichen als Separator verwendet.

var x = "JavaScript mit Adi Prinz";
var y = x.split(" "); 
console.log(y[0]); // liefert JavaScript

Number-Object

Numbers sind in JavaScript sogenannte Primitives können aber auch Objekte sein. Eine Deklaration wie:

var myNum = 5.5;
var myObj = new String(5.5);

ist eigentlich dasselbe, auch hier kann mit typeof() der Unterschied getestet werden.

console.log(typeof(myNum)); // liefert number
console.log(typeof(myObj)); // liefert object

Die Deklaration von Numbers wird auch literale Schreibweise genannt. Obwohl Primitives im engsten Sinn keine Objekte sind, stehen trotzdem alle Methoden und Eigenschaften zur Verfügung.

Boolean-Object

Der Datentyp Boolean ist ein logischer Wert, der nur zwei Werte kennt: true oder false. Boolean wird z.B. für einen Vergleich eingesetzt. wenn Werte miteinander verglichen werden, ist das Ergebnis true oder false. Boolean kann als Literal oder mit dem Schlüsselwort new geschrieben werden.

var x = false; // liefert false
var y = 5 = 3 + 2; // liefert true
var x = new Boolean(false); // liefert true
var y = new Boolean(5 = 3 + 2); // liefert true

Hier gibt es aber einen kleinen aber feinen Unterschied: Die Werte true und false des Boolean-Objektes sind nicht zu verwechseln mit den primitiven Booleanwerten true und false. Jedes Objekt, dessen Wert nicht undefined oder null entspricht, einschließlich eines Boolean-Objektes, dessen Wert false ist, wird bei der Übergabe an eine Bedingung als true gewertet.

var x = false;
var y = new Boolean(false);
if (x) {
console.log("Der Wert x"); // wird nicht ausgeführt (false)
}
if (y) {
console.log("Der Wert y"); // wird ausgeführt (true)
}

Boolean mit einer Funktion

Es gibt noch eine dritte Möglichkeit für booleanische Werte, nämlich mit einer Funktion mit folgender Syntax:

var x = Boolean(false);

Ein Boolean mit einer Funktion ist auch ein Primitive und verhält sich auch so.
Folgende Werte werden bei Primitives als false ausgewertet:

  • Leere Zeichenkette ("")
  • Ohne Wertangabe / undefined
  • Der Wert Null
  • Der Wert false
  • Der Wert NaN

Beispiele mit Vergleiche:

var x = 5 > 2 * 2; // liefert true
var y = true; // hat den Wert true
var z = Boolean("Hallo Welt!"); // liefert true
var txt = "x= " + x + " y= " + y + " z= " + z;
console.log(txt);

Auch Booleans können mit dem typeof()-Operator geprüft werden:

var x = false;
var y = new Boolean(false);
console.log(typeof(x)); // liefert boolean
console.log(typeof(y)); // liefert object

Boolean Methoden und Eigenschaften

Auch Boolean bietet Eigenschaften und Methoden an, hier finden sie dafür die Liste:

w3schools.com

wiki.selfhtml.org

developer.mozilla.org

Diese Aussage habe ich auf der Webseite von w3schhools.com gefunden.
Always treat numbers, strings, or booleans as primitive values. Not as objects. Declaring these types as objects, slows down execution speed, and produces nasty side effects:

Array-Object

Während eine Variable nur einen Wert speichert, kann ein Array viele Werte speichern. Die gespeicherten Werte müssen nicht vom gleichen Typ sein, sondern können unterschiedlich sein (z.B. Sting, Number, Boolean, Function usw.). Für das Erstellen eines Arrays stellt JavaScript zwei Möglichkeiten zur Verfügung:

var x = ["HTML", "CSS", "JavaScript", "PHP"];

In der literalen Version werden nach dem Namen und der Zuweisung, Werte in eckigen Klammern geschrieben, getrennt mit einem Komma. Jeder Eintrag bekommt intern automatische eine Nummer (Index), beginnend bei Null (0).

Das Schlüsselwort new bietet eine weitere Möglichkeit ein Array zu erstellen (Array-Konstruktor). Hier sind die Klammern rund und auch in diesem Array bekommt jeder Eintrag einen Index.

var y = new Array("HTML", "CSS", "JavaScript", "PHP");

Beide Beispiele liefern dasselbe Array, beim Prüfen mit dem typeof()-Operator bekommen wir ein unerwartetes Ergebnis, beide Arrays liefert als Typ object .

console.log(typeof(x)); // liefert object
console.log(typeof(y)); // liefert object

Leere Arrays erstellen

Arrays können leer erstellt werden, eine Füllung zur Laufzeit ist möglich.

var arr = [];
arr[0] = "HTML";
arr[1] = "CSS";
arr[2] = "JavaScript";
arr[3] = "PHP";

// oder

var arr = new Array();
arr[0] = "HTML";
arr[1] = "CSS";
arr[2] = "JavaScript";
arr[3] = "PHP";

Array-Werte zurückgeben

Die Ausgabe von Werten werden mit dem Index definiert.

Der Index von Arrays beginnt in JavaScript immer bei Null (0).

var arr = ["HTML", "CSS", "JavaScript", "PHP"];
arr[2]; // liefert JavaScript

Mehrdimensionale Arrays

Arrays können auch mehrdimensional sein. Genauer gesagt können die Werte eines Arrays nicht nur einfache (skalare) Werte sein, sondern auch wiederum Arrays beziehungsweise Objekte. Dabei muss sich nicht zwangsläufig eine Struktur ergeben, die in jeder Dimension gleich groß ist. Auch ein unregelmäßiger Aufbau wie in einer Baumstruktur ist möglich.

var person = new Array();

person[0] = new Array("Adi", "Gabi", "Harald"; "Julia"); 
person[1] = "Prinz"; 
person[2] = "Bad Hofgastein"; 
  
person[0][0]; // liefert Adi
person[2]; // liefert Bad Hofgastein

Mehr zum Thema Arrays finden sie im Kapitel Arrays

Function-Object

JavaScript stellt neben vordefinierten Funktionen auch die Möglichkeit eigene Funktionen zu erstellen. Dabei stehen drei Optionen zur Verfügung:

Eine Funktionsdeklaration wird ohne einer Zuweisung an eine Variable geschrieben und folgt folgender Syntax:

function myFunction() {
return "Hallo Welt!";
}

Eine Funktionsausdruck wird mit einer Zuweisung an eine Variable geschrieben. Ein Funktionsausdruck kann mit oder ohne Funktionsnamen geschrieben sein. Ein abschließendes Semikolon muss geschrieben werden.

var x = function myFunc() {
return "Hallo Welt!";
};

// oder

var x = function() {
return "Hallo Welt!";
};

Eine Funktion mit Funktionskonstruktor wird mit dem Schlüsselwort new geschrieben. Achtung auf die geänderte Schreibweise, Funktionsanweisungen und Statements werden im Parameter geschrieben, mit Komma getrennt und in Anführungszeichen. Das Wort Function beginnt mit Großbuchstaben, ein abschließendes Semikolon muss geschrieben werden.

var y = new Function('return "Hallo Welt!"');

Im Prinzip machen alle drei Versionen dasselbe, eine Funktion kann auch als Zeilensyntax geschrieben werden. In jedem Fall liefert eine Prüfung mit typeof() immer function .

console.log(typeof(myFunction)); // liefert function
console.log(typeof(x)); // liefert function
console.log(typeof(y)); // liefert function

Funktionsparameter und Argumente

Parameter sind Namen, die bei der Funktionsdefinition im Klammernpaar stehen. Argumente sind die Parameterwerte, die übergeben werden. Eine Funktion kann innerhalb des Anweisungsblocks auch Variablen aufnehmen. Diese Variablen stehen ausserhalb der Funktion nicht zur Verfügung.

function myFunction(a, b) {
var c = a * b;
return c;
}

// oder

var x = function(a, b) {
var c = a * b;
return c;
};

// oder

var y = new Function(
'a', 'b', 
'var c = a + b; return c;'
);

Das Schlüsselwort return bestimmt den Wert, der beim Aufruf zurückgegeben wird. Der Funktionsaufruf erfolgt mit dem Funktionsnamen und den Argumenten:

myFunction(5, 3); // liefert 15
x(5, 2); // liefert 10
y(2, 2); // liefert 4

Mehr zum Thema Funktionen finden sie im Kapitel Funktionen

Object-Object

Nahezu alles in JavaScript ist ein Objekt. Neben den JavaScript Objekten gibt es auch die Möglichkeit, eigene Objekte zu erstellen. Wie jedes Objekt besteht ein benutzerdefiniertes Objekt aus Eigenschaften und Methoden. Das Objekt wird beim Erstellen an eine Variable übergeben, Eigenschaften und Wertzuweisungen werden mit einem Doppelpunkt getrennt. Der Anweisungsblock kommt in geschweifte Klammern und wird mit einem Semikolon abgeschlossen. Zulässig ist sowohl Zeilen- und Blocksyntax.

var x = {firstName:"Adi", lastName:"Prinz", age:60}; 
// oder
var x = {
firstName:"Adi", lastName:"Prinz", age:60
}; 

Für das Erstellen eines benutzerdefinierten Objekts stellt JavaScript zwei Möglichkeiten zur Verfügung:

Objekt mit dem Konstruktor new

Die Syntax ist dabei etwas anders, zuerst wird eine Objektvariable erstellt, der Objektvariablen werden Eigenschaften und Werte zugewiesen. Zwischen der Objektvariablen und der Eigenschaft wird ein Punk geschrieben (person.firstName = "Adi").

var y = new Object(); 
y.firstName = "Adi";
y.lastName = "Prinz";
y.age = 60;

In jedem Fall liefert eine Prüfung mit typeof() immer object .

console.log(typeof(x)); // liefert object
console.log(typeof(y)); // liefert object

Objekt-Methoden

Funktionen, die einem Objekt zugewiesen sind, werden auch Methoden genannt. Methoden stehen in Objekt-Literalen und Objekten mit einem Konstruktor zur Verfügung.

var person = {
firstName:"Adi",
lastName:"Prinz", 
age:60,
fullName : function() {
return person.firstName + " " + person.lastName;
}}; 

// oder

var person = new Object(); 
person.firstName = "Adi";
person.lastName = "Prinz";
person.age = 60;
person.fullName = function() {
return person.firstName + " " + person.lastName;
};

Aufruf von Objekt-Eigenschaften und Methoden

Beim Aufruf von Eigenschaften und Methoden wird die Objektvariable und Eigenschaft bzw. Methode wieder mit einem Punkt getrennt. Methoden brauchen auch naoch den Parameter.

person.firstName;
person.fullName();

Mehr zum Thema Objekte finden sie im Kapitel Objekte

RegExp-Object

Regulären Ausdrücke (RegEx) gibt es in nahezu allen Programmiersprachen, so auch in JavaScript. Das RegExp-Object speichert reguläre Ausdrucke in Javascript. Reguläre Ausdrücke suchen mit einem Suchmuster nach Zeichenfolgen z.B. finde alle Wörter, die mit einem A anfangen und mehr als drei Buchstaben haben«. Ein häufig benutztes Anwendungsgebiet ist das Prüfen von Formulareingaben vor dem Senden, z.B. ob eine Email Adresse syntaktisch richtig ist?
Das RegExp-Object gibt es mit oder ohne dem Konstruktor, in beiden Fällen liefert typeof() object zurück.

var x = new RegExp('Prinz', 'i');
var y = /Prinz/i;
console.log(typeof(x)); // liefert object
console.log(typeof(y)); // liefert object

Die Syntax

Ein regulärer Ausdruck besteht aus einem Suchmuster (pattern) und einem Modifier.

var x = new RegExp('pattern', 'modifier');
var y = /pattern/modifier;

In der Schreibweise ohne dem Konstruktor wird das Suchmuster innerhalb von Slashes (//) geschrieben, beim Konstruktor ist das erste Argument das Suchmuster. Der optionale Modifier ist beim Konstruktor das zweite Argument, ohne Konstruktor steht der Modifier direkt nach dem Suchmuster.

Pattern

Suchmuster finden Übereinstimmungen nach Kriterien die aus folgenden Elementen bestehen können:

  • Strings oder Zeichen
  • Multiplikatoren (Quantifiers)
  • Zeichenklassen (Metacharacters)
  • Klammern (Brackets)

Methoden des RegExp-Objects

Das RegExp-Objekt stellt natürlich auch eigene Methoden und Eigenschaften zur Verfügung. Im folgenden Beispiel ist "Adi Prinz" das Suchmuster und "i" der Modifier. Der Modifier "i" prüft auf korrekte Groß- und Kleinbuchstaben. Die test-Methode prüft ob RegEx im String vorkommt und liefert true oder false.

var str = "JavaScript mit Adi Prinz";
var patt = new RegExp("Adi Prinz", "i");
var res = patt.test(str);
console.log(res); // liefert true

Das nächste Pattern sucht, ob im Text a oder p vorkommt.

var str = "JavaScript mit Adi Prinz";
var patt = /[ap]/i;
var res = patt.test(str);
console.log(res); // liefert true

Das nächste Pattern sucht, ob im Text zumindest ein "x" vorkommt.

var str = "JavaScript mit Adi Prinz";
var patt = /x+/i;
var res = patt.test(str);
console.log(res); // liefert false

Methoden des String-Objects

String-Methoden und RegEx bieten viele interessante Möglichkeiten, z.B. liefert die match()-Methode ein Array aus String die mit regulären Ausdrücken übereinstimmen. Der Modifier "g" findet alle Vorkommen von Pattern.

var str = "Sag Ja zu JavaScript mit Adi Prinz";
var res = str.match(/Ja/g);
var arr = res.length;
console.log(arr); // liefert 2

Die search()-Methode sucht nach einen Pattern und liefert dei Position.

var str = "JavaScript mit Adi Prinz";
var res = str.search(/Adi/i);
console.log(res); // liefert 15

Die replace()-Methode ersetzt einen String anhand eines Pattern.

var str = "JavaScript mit Adi Prinz und Gabi Prinz";
var res = str.replace(/Prinz/g, "Müller");
console.log(res); // liefert Müller statt Prinz

Date-Object

Das Date-Objekt ist für Berechnungen mit Datum und Zeit verantwortlich. Auch Date() bietet den Konstruktor mit dem Schlüsselwort new . Ein Aufruf ohne dem Schlüsselwort new wandelt einfach den vorgesehenen Zeitpunkt in eine Zeichenfolgendarstellung (String) um.

var x = Date();
var y = new Date();
console.log(typeof(x)); // liefert string
console.log(typeof(y)); // liefert object
console.log(x);
console.log(y);

Das Date-Object bezieht sich auf die Zeit, die auf der Systemzeit des Anwenderrechners basiert, die aktuelle Systemzeit des Server-Rechners kann mit JavaScript nicht ermittelt werden. Das Date-Object kann Jahr, Monat, Tag, Stunde, Minute, Sekunde und Millisekunde darstellen.

document.getElementById("dat1").innerHTML = Date();

Laut ECMAScript muss das Date-Objekt jedes Datum und jede Zeit innerhalb von 100 Millionen Tagen vor und nach dem 1.1.1970 umsetzen. Das sind 273 785 Jahre vor 1970 und 273 785 Jahre nach 1970. Das Javascript Date-Object reicht also noch bis in das Jahr 275755 (Timestamp).
Quelle mediaevent.de

Datum und Eingabeformate

Während Date() die aktuelle Zeit liefert, kann auch ein beliebiges Datum generiert werden. Hier einige Beispiele:

var a = new Date(Jahr, Monat, Tag);
var b = new Date(Jahr, Monat, Tag, Stunden, Minuten, Sekunden);
var c = new Date(Millisekunden);
var d = new Date("Monat Tag, Jahr Stunden:Minuten:Sekunden");

Datum und Uhrzeit werden als Zahl eingegben. Achtung beim Monat, hier beginnt die Zählung bei Null (0). Im Beispiel bedeutet 11 nicht den November, sondern Dezember. Datum kann auch als String definiert werden, dabei wird das Format in Anführungszeichen gesetzt ("") und der Monatsnamen kann ausgeschrieben sein (z.B. december in var d). Das Datum in var c sind Millisekunden, die seit dem 1.1.1970 - 00 Uhr vergangen sind. Im Beispiel ist das der 24.12.2016 - 00 Uhr.

var a = new Date(2016, 11, 24);
var b = new Date(2016, 11, 24, 00, 00, 00);
var c = new Date(1482534000000);
var d = new Date("december 24, 2016 00:00:00");
console.log(a);
console.log(b);
console.log(c);
console.log(d);

Die Eingabe von Datum und Uhrzeit im Format wie oben geschrieben liefern alle dieselbe Ausgabe:

Sat Dec 24 2016 00:00:00 GMT+0100 (Mitteleuropäische Zeit    )

Weitere Eingabeformate

Das Date-Object kennt viele Eingabeformate für Datums- und Uhrzeitwerte. Die Eingabe besteht standardmäßig aus numerischen Werten, können aber auch Strings sein. Strings sollen im Normalfall nur Monatsnamen (z.B. Dec, dec, December, december) und Trennzeichen (z.B. (/) oder (-)) sein. Bei numerischen Eigaben ist der Monat immer vor dem Tag. Achtung bei der Verwendung von Strings in Datumsformaten, diese müssen in Anführungszeichen ("").

Date(YYYY-MM-DD)
Date(YYYY-MM)
Date(YYYY)
Date(MMM DD YYYY)
Date(MM/DD/YYYY)
usw.

Einige Beispiele habe ich hier geschrieben. Monate beginnen in Strings nicht bei Null sondern bei 1 (der Dezember hat hier den Wert 12).

var a = new Date("2016-12-24");
var b = new Date("2016/12/24");
var c = new Date("Dec 24 2016");
var d = new Date("DECEMBER, 24, 2016"); 
console.log(a);
console.log(b);
console.log(c);
console.log(d);

Ausgabeformate von Datum und Uhrzeit

Datumsformate wie sie oben definiert sind, liefern immer dasselbe Ausgabeformat:

Sat Dec 24 2016 01:00:00 GMT+0100 (Mitteleuropäische Zeit    )

Um Datum in benutzrdefinierte Formate zu konvertieren stellt und das Date-Object viele Methoden zur Verfügung. Die toLocaleString()-Methode wandelt ein Datum in das Format des Standorts vom Client-Rechner um.

var a = new Date("2016/12/24");
var b = a.toLocaleString();
console.log(b);
// liefert 24.12.2016, 00:00:00

Methoden und Eigenschaften von Date

Aus der Menge von Date-Methoden habe ich hier ein Beispiel erstellt. Mit den get-Methoden können Elemente aus dem String extrahiert werden z.B. der Monatsname. Die getMonth()-Methoden findet den Monatsnamen als numerischen Wert, beginnend bei Null (0).

var a = new Date();
var b = a.getMonth();
console.log(a); // liefert Datum und Uhrzeit
console.log(b); // liefert Monat als Zahl (0-11)

Das Array im nächsten beispiel liefert den Monatsnamen als String in deutscher Sprache. Dasselbe funktioniert natürlich auch mit Wochentagen (getDay).

var a = new Date();
var month = new Array();
 month[0] = "Januar";
 month[1] = "Februar";
 month[2] = "März";
 month[3] = "April";
 month[4] = "Mai";
 month[5] = "Juni";
 month[6] = "Juli";
 month[7] = "August";
 month[8] = "September";
 month[9] = "Oktober";
 month[10] = "November";
 month[11] = "Dezember";
var c = month[a.getMonth()];
console.log(c); // liefert deutschen Monatsnamen

Referenzen

Hier finden sie noch komplette Referenzen der Eigenschaften und Methoden des Date-Objects:

w3schools.com

wiki.selfhtml.org

developer.mozilla.org

Math-Object

Das Math-Object ist ein Standardobjekt, das Eigenschaften und Methoden für mathematische Berechnungen besitzt. Das Math-Object braucht keinen Konstruktor und kann direkt verwendet werden. Eigenschaften des Math-Objects werden oft auch als Konstanten bezeichnet. Die Syntax lautet:

var x = Math.PI; // Konstante PI liefert 3.141592653589793
var y = Math.random(); // Methode random liefert Zufallszahl von 0 bis 1
var z = Math.max(2 * 5, 9 / 3); // Methode max liefert größeren Wert (10)
console.log(x);
console.log(y);
console.log(z);

Referenzen des Math-Objects finden sie hier:

w3schools.com

wiki.selfhtml.org

developer.mozilla.org