Mit JavaScript ist es möglich Objekt Orientiert zu programmieren (OOP). Dies bedeutet das der Code eine modulare Struktur aufweist, der Vorteil bei dieser Programmierart ist die Wartbarkeit sowie die Erweiterbarkeit. Wenn der Code gut entworfen wurde, ist es einfacher den Code zu verstehen. Mit einer Klasse ist es möglich Variablen und Methoden (Funktionen) zu einem Modul zu bündeln. Aus diesem Modul können dann beliebig viele Objekte erstellt werden, mit diesem Objekten sind die Methoden und Variablen verknüpft. Dabei hat aber jedes Objekt seine eigenen Variablen, sprich die Objekte teilen sich nicht die Variablen.
Klasse definieren
In JavaScript wird eine Klasse mit „class“ definiert, nach „class“ folgt der Name der Klasse. Es ist zu empfehlen einen Constructor zu verwenden, dies ist eine Methode die beim erstellen des Objekts ausgeführt wird.
class einfachesMathe {
constructor(zahlEins, zahlZwei) {
this.zahlEins = zahlEins;
this.zahlZwei = zahlZwei;
}
}
In diesem Beispiel wird die Klasse einfachesMathe erstellt, es werden 2 Parameter beim erstellen des Objektes in die Klasse gespeichert. Das this. gibt an, dass die Variablen Klassen intern gespeichert werden, sprich die beiden Werte können von jeder Methode in der Klasse benutzt werden.
Objekt erstellen
Mit „new“ kann von einer Klasse ein Objekt erstellt werden. In diesem Beispiel werden 2 Parameter übergeben, 2 und 5. Das erstellte Objekt wird in die Variable aufgabe gespeichert, mittels dieser Variable kann dann auf das Objekt zugegriffen werden.
var aufgabe = new einfachesMathe(2, 5);
console.log(aufgabe.zahlEins);
console.log(aufgabe.zahlZwei);
Dabei sollte aber drauf geachtet werden, dass die Klasse zuerst definiert wurde. Bei Funktionen ist dies egal ob zuerst der Funktionsaufruf kommt und dann die Funktion, aber bei Klassen muss zuerst die Klasse erstellt worden sein.
var aufgabe = new einfachesMathe(2, 5);
console.log(aufgabe.zahlEins);
console.log(aufgabe.zahlZwei);
class einfachesMathe {
constructor(zahlEins, zahlZwei) {
this.zahlEins = zahlEins;
this.zahlZwei = zahlZwei;
}
}
class einfachesMathe {
constructor(zahlEins, zahlZwei) {
this.zahlEins = zahlEins;
this.zahlZwei = zahlZwei;
}
}
var aufgabe = new einfachesMathe(2, 5);
console.log(aufgabe.zahlEins);
console.log(aufgabe.zahlZwei);
Methoden
Methoden sind Funktionen innerhalb einer Klasse. Es gibt 4 Arten von Methoden in einer Klasse, „get“ es werden Daten aus der Klasse geholt, „set“ übergibt an die Klasse Daten, „static“ sind nicht Objekt gebundene Methoden und werden als Helfer Methoden benutzt, des weiteren gibt es noch interne Methoden, bei diesen schreibt man einfach nur den Namen.
get Methode
Wie der Name schon verrät, holt man sich Daten aus der Klasse mit der Methoden art.
class einfachesMathe {
constructor(zahlEins, zahlZwei) {
this.zahlEins = zahlEins;
this.zahlZwei = zahlZwei;
}
addieren(){
return this.zahlEins + this.zahlZwei;
}
get addition(){
return this.addieren();
}
}
var aufgabe = new einfachesMathe(2, 5);
console.log(aufgabe.addition);
Bei get werden keine runden Klammern benutzt, da diese Methode keine Parameter erlaubt.
set Methode
Mit set erstellt man eine Methode die Daten an die Klasse übergibt. Es ist nur ein Parameter erlaubt.
class einfachesMathe {
constructor(zahlEins, zahlZwei) {
this.zahlEins = zahlEins;
this.zahlZwei = zahlZwei;
}
set setzeZahlEins(zahl){
this.zahlEins = zahl;
}
set setzeZahlZwei(zahl){
this.zahlZwei = zahl;
}
}
var aufgabe = new einfachesMathe(2, 5);
aufgabe.setzeZahlEins = 3;
aufgabe.setzeZahlZwei = 8;
Falls man doch mehrere Werte übergeben möchte, kann dies durch ein Array umgangen werden.
class einfachesMathe {
constructor(zahlEins, zahlZwei) {
this.zahlEins = zahlEins;
this.zahlZwei = zahlZwei;
}
set neueZahlen(zahlen){
this.zahlEins = zahlen[0];
this.zahlZwei = zahlen[1];
}
}
var aufgabe = new einfachesMathe(2, 5);
aufgabe.neueZahlen = [3,8];
static Methoden
Static Methoden sind Objekt übergreifend, dies bedeutet, dass 2 Objekte miteinander vergleicht werden können.
class einfachesMathe {
constructor(zahl) {
this.zahl = zahl;
}
get getZahl(){
return this.zahl;
}
static groeszer(objektA, objektB){
if(objektA.getZahl > objektB.getZahl)
return objektA;
else
return objektB;
}
}
var zahl1 = new einfachesMathe(5);
var zahl2 = new einfachesMathe(8);
einfachesMathe.groeszer(zahl1, zahl2).getZahl;
Static Methoden werden immer auf die Klasse angewendet und nicht auf das Objekt
interne/private Methoden
Interne Methoden sind Methoden die nur innerhalb der Klasse benutzt werden. Diese Methoden sollten nicht von außen ausgeführt werden. Am besten schreibt man noch ein _ vor den Methodennamen, damit erkennbar wird das dies eine interne bzw. private Methode ist. Diese Methoden sind trotzdem von außen abrufbar, aber dies sollte vermieden werden, da sonst der Code unsauber wird.
class einfachesMathe {
constructor(zahl1, zahl2) {
this.zahl1 = zahl1;
this.zahl2 = zahl2;
}
_berechneAddition(){
return this.zahl1 + this.zahl2;
}
get getAddition(){
return this._berechneAddition();
}
}
var aufgabe = new einfachesMathe(5, 6);
aufgabe.getAddition;
Vererbung von Klassen
Klassen Vererbung bedeutet, dass die Klasse die Methoden und Variablen von einer anderen Klasse übernimmt. Damit ist es möglich unspezifische Methoden in einer Klasse zu definieren und dann auf andere Klassen zu vererben
class zahlen{
constructor(zahl1, zahl2) {
this.zahl1 = zahl1;
this.zahl2 = zahl2;
}
set setZahlen(zahlen){
this.zahl1 = zahlen[0];
this.zahl2 = zahlen[1];
}
get getZahlen(){
return [this.zahl1, this.zahl2];
}
}
class addition extends zahlen{
_berechneAddition(){
return this.zahl1 + this.zahl2;
}
get getAddition(){
return this._berechneAddition();
}
}
class subtraktion extends zahlen{
_berechneSubtraktion(){
return this.zahl1 - this.zahl2;
}
get getSubtraktion(){
return this._berechneSubtraktion();
}
}
var aufgabe = new addition(5, 6);
aufgabe.getAddition;
aufgabe.getZahlen;
var aufgabe2 = new subtraktion(8, 5);
aufgabe2.getSubtraktion;
aufgabe2.getZahlen;
super
„super“ wird verwendet, wenn von der Elternklasse eine Methode aufgerufen werden soll. Es kann vorkommen das die Klasse und die Elternklasse gleichnamige Methoden beinhalten, durch „super“ wird dann die Methode aus der Elternklasse verwendet und bei „this“ die Methode aus der eigenen Klasse.
class vergleich {
constructor(zahl) {
this.zahl = zahl;
}
_check(){
if(this.zahl == 1)
return true;
else
return false;
}
}
class zahlenvergleich extends vergleich{
_check(){
if(this.zahl == 2)
return true;
else
return false;
}
get getVergleich(){
return [this._check(), super._check()];
}
}
var test = new zahlenvergleich(2);
test.getVergleich;
Warte bis das Fesnter „zu übertragene Daten“ wieder leer ist.
Lasse die Standardeinstellungen und klicke auf „click to upload“, navigiere jetzt zu deinen runtergeladenen Bildern und öffne den Ordner, in meinem Beispiel den Ordner 08. Jetzt markiere das erste Bild und drücke die Tastenkombination „Strg + a“, damit markierst du alle Bilder. Drücke jetzt auf öffnen. 
Warte kurz bis alle Bilder durchlaufen sind und downloade das .zip Archiv. 
Navigiere jetzt in Filezilla in den entpackten Ordner (linker Dateibrowser) und öffne im rechten Fenster den Bilder-Ordner auf dem Server.
Markiere auf der linken Seite alle Bilder (Strg + a) und ziehe sie in den linken Ordner. Bestätige das du die Dateien überschreiben möchtest, und setze den Hacken bei „immer Aktion ausführen“. 
