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 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.
let myStr = new String("Hallo Welt!");
let myPI = Math.PI;
Verwenden sie die Browser-Konsole um JavaScript Code auf dieser Seite zu testen.
String sind in JavaScript sogenannte Primitives können aber auch Objekte sein. Eine Deklaration wie:
let myStr = "Hallo Welt!";
let 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 werden von JavaSript Programmierer häufig gebraucht, ein paar einfache Beispiele habe ich hier:
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.
let x = " Hallo" + "Welt! "; console.log(x.length); x = x.trim(); console.log(x.length);
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.
let x = "Hallo Welt!" let y = x.substr(1, 4); console.log(y); // liefert allo
Auch mit der substring()-Methode wird aus einem String ein Teilstring extrahiert, der zwischen ersten und zweiten Argument liegt.
let x = "Hallo Welt!" let y = x.substring(1, 4); let z = x.substr(1, 4); console.log(y); // liefert all console.log(z); // liefert allo
Mit der replace()-Methode wird ein teilstring, der im ersten Argument definiert wird, durch einen String des zweiten Arguments ersetzt.
let x = "Hallo Welt!";
let y = x.replace("Welt", "Adi Prinz");
console.log(y); // liefert Hallo Adi Prinz!
Mit der split()-Methode wird ein String anhand eines Separators (irgendein Zeichen) in ein Array aufgeteilt. Im Beispiel wird das Leerzeichen als Separator verwendet.
let x = "JavaScript mit Adi Prinz";
let y = x.split(" ");
console.log(y[0]); // liefert JavaScript
Hier finden sie eine Liste der Eigenschaften und Methoden von String:
Numbers sind in JavaScript sogenannte Primitives können aber auch Objekte sein. Eine Deklaration wie:
let myNum = 5.5; let 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.
Hier finden sie eine Liste der Eigenschaften und Methoden von Number:
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.
let x = false; // liefert false let y = 5 = 3 + 2; // liefert true let x = new Boolean(false); // liefert true let 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.
let x = false;
let 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)
}
Es gibt noch eine dritte Möglichkeit für booleanische Werte, nämlich mit einer Funktion mit folgender Syntax:
let 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:
Beispiele mit Vergleiche:
let x = 5 > 2 * 2; // liefert true
let y = true; // hat den Wert true
let z = Boolean("Hallo Welt!"); // liefert true
let txt = "x= " + x + " y= " + y + " z= " + z;
console.log(txt);
Auch Booleans können mit dem typeof()-Operator geprüft werden:
let x = false; let y = new Boolean(false); console.log(typeof(x)); // liefert boolean console.log(typeof(y)); // liefert object
Auch Boolean bietet Eigenschaften und Methoden an, hier finden sie dafür die Liste:
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:
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:
let 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.
let 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
Arrays können leer erstellt werden, eine Füllung zur Laufzeit ist möglich.
let arr = []; arr[0] = "HTML"; arr[1] = "CSS"; arr[2] = "JavaScript"; arr[3] = "PHP"; // oder let arr = new Array(); arr[0] = "HTML"; arr[1] = "CSS"; arr[2] = "JavaScript"; arr[3] = "PHP";
Die Ausgabe von Werten werden mit dem Index definiert.
Der Index von Arrays beginnt in JavaScript immer bei Null (0).
let arr = ["HTML", "CSS", "JavaScript", "PHP"]; arr[2]; // liefert JavaScript
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.
let 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
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.
let x = function myFunc() {
return "Hallo Welt!";
};
// oder
let 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.
let 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
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) {
let c = a * b;
return c;
}
// oder
let x = function(a, b) {
let c = a * b;
return c;
};
// oder
let y = new Function(
'a', 'b',
'let 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
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.
let x = {firstName:"Adi", lastName:"Prinz", age:60};
// oder
let x = {
firstName:"Adi", lastName:"Prinz", age:60
};
Für das Erstellen eines benutzerdefinierten Objekts stellt JavaScript zwei Möglichkeiten zur Verfügung:
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").
let 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
Funktionen, die einem Objekt zugewiesen sind, werden auch Methoden genannt. Methoden stehen in Objekt-Literalen und Objekten mit einem Konstruktor zur Verfügung.
let person = {
firstName:"Adi",
lastName:"Prinz",
age:60,
fullName : function() {
return person.firstName + " " + person.lastName;
}};
// oder
let person = new Object();
person.firstName = "Adi";
person.lastName = "Prinz";
person.age = 60;
person.fullName = function() {
return person.firstName + " " + person.lastName;
};
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
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.
let x = new RegExp('Prinz', 'i');
let y = /Prinz/i;
console.log(typeof(x)); // liefert object
console.log(typeof(y)); // liefert object
Ein regulärer Ausdruck besteht aus einem Suchmuster (pattern) und einem Modifier.
let x = new RegExp('pattern', 'modifier');
let 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.
Suchmuster finden Übereinstimmungen nach Kriterien die aus folgenden Elementen bestehen können:
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.
let str = "JavaScript mit Adi Prinz";
let patt = new RegExp("Adi Prinz", "i");
let res = patt.test(str);
console.log(res); // liefert true
Das nächste Pattern sucht, ob im Text a oder p vorkommt.
let str = "JavaScript mit Adi Prinz"; let patt = /[ap]/i; let res = patt.test(str); console.log(res); // liefert true
Das nächste Pattern sucht, ob im Text zumindest ein "x" vorkommt.
let str = "JavaScript mit Adi Prinz"; let patt = /x+/i; let res = patt.test(str); console.log(res); // liefert false
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.
let str = "Sag Ja zu JavaScript mit Adi Prinz"; let res = str.match(/Ja/g); let arr = res.length; console.log(arr); // liefert 2
Die search()-Methode sucht nach einen Pattern und liefert dei Position.
let str = "JavaScript mit Adi Prinz"; let res = str.search(/Adi/i); console.log(res); // liefert 15
Die replace()-Methode ersetzt einen String anhand eines Pattern.
let str = "JavaScript mit Adi Prinz und Gabi Prinz"; let res = str.replace(/Prinz/g, "Müller"); console.log(res); // liefert Müller statt Prinz
Eine Referenz von RegEx habe ich hier zusammengestellt:
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.
let x = Date(); let 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
Während Date() die aktuelle Zeit liefert, kann auch ein beliebiges Datum generiert werden. Hier einige Beispiele:
let a = new Date(Jahr, Monat, Tag);
let b = new Date(Jahr, Monat, Tag, Stunden, Minuten, Sekunden);
let c = new Date(Millisekunden);
let 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 let d). Das Datum in let c sind Millisekunden, die seit dem 1.1.1970 - 00 Uhr vergangen sind. Im Beispiel ist das der 24.12.2016 - 00 Uhr.
let a = new Date(2016, 11, 24);
let b = new Date(2016, 11, 24, 00, 00, 00);
let c = new Date(1482534000000);
let 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 )
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).
let a = new Date("2016-12-24");
let b = new Date("2016/12/24");
let c = new Date("Dec 24 2016");
let d = new Date("DECEMBER, 24, 2016");
console.log(a);
console.log(b);
console.log(c);
console.log(d);
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.
let a = new Date("2016/12/24");
let b = a.toLocaleString();
console.log(b);
// liefert 24.12.2016, 00:00:00
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).
let a = new Date(); let 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).
let a = new Date(); let 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"; let c = month[a.getMonth()]; console.log(c); // liefert deutschen Monatsnamen
Hier finden sie noch komplette Referenzen der Eigenschaften und Methoden des Date-Objects:
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:
let x = Math.PI; // Konstante PI liefert 3.141592653589793 let y = Math.random(); // Methode random liefert Zufallszahl von 0 bis 1 let 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: