JavaScript für Fortgeschrittene

Arrays

Arrays (auch Felder) gruppieren zusammengehörige Elemente, die unter einem gemeinsamen Namen gespeichert werden.

Arrays werden in JavaScript durch das Array-Objekt repräsentiert. Mit einem Array-Objekt können viele Variablen erzeugt werden, dadurch sparrt sich gerade bei größeren Gruppierungen viel Zeit, da man sie nicht einzeln anlegen muss.

Ein Array wird wie folgt erzeugt:

Erzeugung eines Array-Objekts

Der Befehl erzeugt ein Feld Test mit 100 Elementen. Die Elemente werden alle automatisch auf undefined (kein Wert enthalten) gesetzt. Alternativ kann man folgenden Code nutzen, um den Array direkt Werte zuzuweisen:

Erzeugung eines Array-Objektes mit direkter Zuweisung

Im vorliegenden Beispiel wird ein Array der Indexlänge 2 (Index startet mit der Zahl 0) erzeugt. Die Indexfelder 0, 1 und 2 haben jeweils Strings zugewiesen bekommen. Nach Durchlauf des Programmes wird ein Hinweisfenster mit dem 0. Indexwert ausgegeben, also rot.

Arrays sind dynamisch, das bedeutet, dass ich ihnen jederzeit neue Werte zuweisen kann und sich dadurch ihre Größe verändert. Im vorliegenden Beispiel möchte ich nun eine weitere Farbe mit folgendem Befehl hinzufügen:

Zuweisung eines Wertes zu einem existierenden Array

Mit einer for-Schleife kann man alle Elemente eines Arrays durchlaufen. Hierbei ist die Länge des Arrays nicht wichtig, es werden alle Elemente nacheinander durchlaufen. Dies wird im folgenden Beispiel deutlich:

Mit dem vorliegenden Code werden alle Array-Inhalte als Hinweisfenster ausgegeben. Ebenfalls können leere Arrays von Beginn an definiert werden. Dazu wird der Konstruktur ohne Parameter aufgerufen. Nach Bedarf können dem Array neue Elemente hinzugefügt werden.

Es können alle möglichen Typen von Daten gespeichert werden (Zahlenwerte, Textstrings, gemischte Datentypen).

Objekte

Objekte in JavaScript sind fest umgrenzte Datenelemente mit Eigenschaften und oft auch mit objektgebundenen Methoden (Funktionen).
Quelle: https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Eigenschaften_und_Methoden

Objekte sind wie Gegenstände der realen Welt. Sie enthalten Daten (Eigenschaften bzw. Attribute) und Werkzeuge (Fähigkeiten bzw. Methoden). Beispiele für Objekte in JavaScript sind Browserfenster, Eingabefelder und Bilder. Ein Browserfenster hat beispielsweise eine bestimmte Größe (Eigenschaft) und kann auf dem Bildschirm verschoben werden (Fähigkeit). Eigenschaften und Methoden haben immer einen Bezug zum Objekt.

Abhängigkeit von Objekten

Beispielsweise wird ein Eingabefeld in einem Browserfenster dargestellt und somit ist das Eingabefeld von diesem abhängig. Diese Abhängigkeiten sind für das Programmieren essenziell.

In JavaScript gibt es bereits vorgefertigte Objekte, wie beispielsweise das Browserfenster. Ebenfalls kann der Programmierer neue Objekte erzeugen:

mit dem Konstruktor: object( )
Konstruktor über Literale { }
Eigener Konstruktor des Programmierers

Erzeugung eines Objektes mit dem Konstruktor:

Erzeugung eines Objektes

Über Konstruktoren lassen sich schnell und einfach viele neue Objekte erzeugen. Ein Konstruktor ist also eine Funktion zum Erstellen von Instanzen. Man kann also sagen, dass ein Konstruktor den Bauplan zum Erstellen eines Objektes liefert. Das String-Objekt kennt die Eigenschaft length, mit der wir die Länge der Zeichenkette auslesen können.

Zur Untersuchung der Inhalte des Objektes nach einer bestimmten Zeichenfolge verwenden wir die Methode indexOf( ), um nach einem bestimmten Teilstring zu suchen. Die Variable bekommt die entsprechende Position zugewiesen.

Objekt definieren und Werte zuweisen

Im vorliegenden Beispiel wurde ein Objekt definiert. Das Objekt enthält eine Variable person1, mit der wir auf das Objekt zugreifen können. Wir weisen dem Objekt die Eigenschaft name und den zugehörigen Wert „Fred“ zu. Die Eigenschaft name wurde vorher nicht explizit definiert, diese wird automatisch von JavaScript erzeugt. Die Person soll begrüßt werden, dafür legen wir die Methode Begrüßung fest. Die Methode ist anfangs definiert und wird nun ausgeführt.

Erzeugung eines Objektes mit dem Konstruktor über Literale:

Die Eigenschaften und Methoden des Objektes werden in den geschweiften Klammern aufgeführt.

Eigener spezialisierter Konstruktor des Programmierers:

Erzeugung eines Objektes mit eigenem Konstruktor

Im vorliegenden Beispiel wird ein Konstruktor definiert, der sich um die Erzeugung des Objektes kümmert. Der Konstruktor heißt Person und innerhalb des Konstruktor sind die Eigenschaft name, sowie die Methode begruessung definiert. Mit new Person wird dann ein neues Objekt erzeugt mit der Referenz person1. Um den Konstruktor nicht nur mit einem Namen (Fred) verwenden zu können schreiben wir stattdessen eine Variable (n) in den Konstruktor rein. Beim Aufruf geben wir dem Objekt den Namen in den Klammern mit und können den Konstruktor somit mehrfach verwenden.

for..in-Schleife

durchläuft die Eigenschaften/Attribute eines Objekts in willkürlicher Reihenfolge. Für jede einzelne Eigenschaft können Anweisungen ausgeführt werden.

instanceof Operator

kann überprüft werden, welchen Typ ein bestimmtes Objekt hat. Es wird entweder true oder false zurückgegeben.

with

um auf ein Objekt zuzugreifen, dass man mehrere Male verwendet, kann man mit with (ojc) drauf zugreifen. Mit with sagt man dem Programm, dass die nachfolgenden Befehle im Zusammenhang mit einem bestimmten Objekt stehen.

Call by Reference

Übergibt man ein Objekt an eine Funktion, so wird nur eine Referenz auf dieses Objekt an die Funktion übergeben und nicht eine Kopie des Objektes. Gegensatz zum Call by Value. Folge daraus ist, dass Änderungen am Objekt innerhalb einer Funktion das Objekt dauerhaft verändern.

Kapselung

= Ziel ist die Aufteilung des Quellcodes in eigenständige Objekte, um die Komplexität zu reduzierenen

Objekte wurden bisher gewöhnlich als globales Objekt erzeugt. Das heißt, dass sie von überall im Script und von anderen Scripten zugänglich waren. Es gab somit bisher keine Trennung zwischen öffentlichen und privaten Daten. Objekte privat zu erzeugen ist durchaus nützlich, möchte man sie vor Veränderungen von außen schützen. Ihre Eigenschaften sollen nicht immer global gelesen und manipuliert werden können. Daher kommt hier die Kapselung ins Spiel.

Um den Zugriff von außen zu verhindern, können Eigenschaften und Methoden als privat definiert werden.

b wird hier im Gegensatz zur a nicht mit dem Schlüsselwort this definiert, sondern als gewöhnliche Variable innerhalb des Konstruktors. Damit ist a als öffentliche und b als private Eigenschaft definiert. Innerhalb des Objektes können wir auf a und b zugreifen, jedoch außerhalb des Objektes nicht.

Prototyping

Prototyping ermöglicht es einem Objekt-Konstruktor, Eigenschaften und Methoden nachträglich zuzufügen. Es ersetzt klassenbasierte Vererbung und das Objekt wird um neue Eigenschaften und Methoden erweitert. Auch bereits existierende Objekte können mit Prototyping erweitert werden.

Erweiterung einer Eigenschaft durch Prototyping:

[Objekttyp].prototype.[Eigenschaft] = [Wert];

Erweiterung einer Methode durch Prototyping:

[Objekttyp].prototype.[Methode] = [Wert];

Vererbung

Bei der Vererbung geht es darum, dass Eigenschaften von Objekten an weitere Objekte mitgegeben werden können. Man sagt, ein Objekt stammt von einem anderen ab. JavaScript benutzt dafür die prototype-Eigenschaft.

Mit dem folgenden Code erbt Y alle Eigenschaften und Methoden von X:

Hierbei stammt nun Z von Y ab, und Y wiederum von X. Die auskommentierten Zahlen beschreiben dabei den Wert, den die Objekte angenommen haben. Über das Objekt Z kann ebenfalls auf die Eigenschaften von a, b und c zugegriffen werden, da Z diese vererbt bekommen hat. Diese Abhängigkeit zueinander nennt man Prototypkette.

Außerdem können Eigenschaften überschrieben werden. Würde man im obigen Code stattdessen function Z() {this.a = 789;} schreiben, würde a mit eben diesem Wert überschrieben werden und somit auch ausgegeben werden.

Auf die gleiche Weise können auch Methoden überschrieben werden, die dann an anderer Stelle z.B. etwas anderes ausgeben.

Erweiterungen in ECMAScript 5

Die neusten Browser können mit den Erweiterungen bereits ganz gut umgehen. Allerdings werden noch viele ältere Browser benutzt, die mit den neuen Befehlen nichts anfangen können.

JavaScript Document Object Model (DOM)

Um in JavaScript etwas an dem zu verändern, was durch den HTML-Code angezeigt wird, benutzt JavaScript das sogenannte Document Object Model.

Der Browser analysiert hier das HTML-Dokument und erstellt daraus das Document Object Model (DOM), also eine Repräsentation des Dokuments, auf die man dann mit JavaScript zugreifen kann. Das DOM ist somit die Schnittstelle zwischen HTML und JavaScript. Alle Elemente werden zu Objekten, die dynamisch aufgerufen, verändert, hinzugefügt und gelöscht werden können. Dafür wird jedoch zuerst der HTML Code in ein Baumdiagramm überführt. Dieses besteht dann aus verschachtelten Knoten: Elementknoten (gelb), Attributknoten (blau) und Textknoten (rot). Diese Knoten sind im DOM die Objekte.

Damit JavaScript nun mit genau diesen Knoten kommunizieren kann gibt es zwei Methoden:

document.getElementById()
document. getElementsByTagName()

Bei ersterem wird einem Element eine Id zugewiesen, worüber das Element dann gefunden wird. Man vergibt eine Id direkt hinter dem Tag, also z.B. : <p id=”text1″>Irgendein Text</p>. Des Weiteren ist es von Vorteil, das Ergebnis von getElementById() in einer Variablen zu speichern, um dann über den Variablennamen eine Änderung vornehmen kann, statt jedes mal den Befehl document.getElementById() auszuschreiben.

Über getElementsByTagName() dagegen können mehrere Elemente auf einmal verändern. So kann man beispielsweise alle Tags einer Sorte auswählen und diese dann nach belieben anpassen. Die Liste die dabei indirekt erstellt wird, besteht aus den Knoten und verhält sich ähnlich wie ein Array. Auf die einzelnen Knoten wird per Index zugegriffen und ebenfalls kann die Liste über eine for-Schleife durchlaufen werden und über die length-Methode gemessen werden.

Durch das DOM kann ebenfalls auf die anknüpfenden Knoten zugegriffen werden. Allerdings nur auf Eltern-, Kind-, oder Geschwisterknoten. Dabei hilft zum Beispiel die .childNodes-Eigenschaft, die eine Liste von allen direkten Kindknoten eines Knotens enthält. Dagegen bietet die Eigenschaft .parentNode die Möglichkeit, die direkten Elternknoten eines Knotens ins Visier zu nehmen.

Die Kontroverse mit DOM ist vor allem durch den Aufwand belegt, mit dem man sich zwischen den Knoten bewegen muss. Weiterhin interpretieren verschiedene Browser das DOM unterschiedlich, weshalb manche Events nicht bei jedem Browser gleich behandelt werden.

JavaScript Bibliotheken

Da sich viele Aufgaben in JavaScript immer wieder wiederholen, werden heutzutage oftmals Bibliotheken zur Erleichterung der Arbeit eingesetzt. Eine Bibliothek ist eine Sammlung von JS-Code, die Lösungen für weit verbreitete bzw. häufige JavaScript-Aufgaben bietet. Bibliotheken beherbergen somit auch Unterprogramme, die durch ihre Hilfsfunktionen die Programmierung erleichtern sollen.

Die sehr bekannte und in JavaScript am meisten genutzte Bibliothek ist jQuery. Zum Benutzen von jQuery bedarf es nur wenigen Klicks. Die Datei wird heruntergeladen und mit der aktuellen Webseite verknüpft.

JavaScript Framework

Ein Framework ist eine Rahmenstruktur und somit kein eigenes Programm. Vielmehr ist es ein Grundgerüst einer Anwendung. Frameworks besitzen bestimmte Entwurfsmuster mit verschiedenen Funktionen (häufig in Form mehrerer Bibliotheken) und dienen der Entwicklung neuer, eigenständiger Anwendungen. Daher ist ein Framework eine Sonderform einer Bibliothek: es gibt die Struktur vor, wie ein Programm aufgebaut sein muss, damit die darin enthaltenen Funktionen sinnvoll funktionieren.

jQuery

jQuery ist eine Bibliothek von JavaScript Funktionen, die eine strukturierte Gesamtheit von kooperierenden Methoden bereitstellt.

Ein jQuery-Object wird am Anfang als primäre Collection bezeichnet. Es enthält darin verkapselte HTML Elemente. Primär liefert eine jQuery Methode auch nur jQuery-Objects zurück. jQuery Methoden werden einfach verkettet.

Das Dollarzeichen $ wird in jQuery benutzt um Zugriff auf Elemente zu erreichen. Im Anschluss können verschiedene Methoden miteinander verkettet werden, um alle auf einmal über die selektierten Elemente laufen zu lassen. Es gibt 3 Typen von Zugriff mit jQuery:

Der Zugriff auf Elemente eines bestimmten Typs erfolgt durch $(“p”).
Der Zugriff auf Elemente einer bestimmten ID erfolgt durch $(“#Absatz”)
Der Zugriff auf Elemente mit einer bestimmten Klasse erfolgt durch $(“p.meineKlasse”)

Dabei gibt es 3 Gruppen von jQuery-Methoden:

Transparente jQuery-Methoden:
Diese geben ein jQuery-Objekt zurück, das der Eingabe-Collection entspricht, von dort kann weiterhin an den Elementen gearbeitet werden und weitere Methoden drüberlaufen. Sie sind verkettbar.

Destruktive jQuery-Methoden
Diese geben ein jQuery-Objekt, das eben nicht der Eingabe-Collection entspricht. Dadurch wird die Collection verringert, erweitert oder eine andere Collection angesprochen. Sie sind verkettbar.

Terminierende jQuery-Methoden
Diese geben kein jQuery-Objekt zurück, sondern DOM-Konten, Strings oder andere Datentypen. Sie sind nicht verkettbar.

CSS-Selektoren

Ein CSS Selektor funktioniert dabei so ähnlich wie das $-Zeichen von jQuery und gibt dem Webbrowser die Anweisung, für welches Tag welcher Stil gilt. Genau wie bei jQuery werden über einen Befehl eine oder mehrere Elementen manipuliert.

Funktionen von jQuery sind:

html( ) – um Inhalte einer Seite hinzufügen. Funktioniert wie innerHTML und ermöglicht das Auslesen oder Ersetzen von HTML
remove( ) – um ein ausgewähltes Element zu entfernen oder zu ersetzen
addClass( ) – um eine Klasse einem Element hinzuzufügen.
removeClass( ) – erklärt sich nun von selbst.
css( )-Funktion – um auf CSS-Eigenschaften zuzugreifen und diese zu ändern.
attr( )-Funktion – um Attribute von HTML-Tags zu lesen und festzustellen.

Event-Management – JavaScript Events & jQuery Events

JavaScript ist eine ereignisgesteuerte Programmiersprache. Events sind Reaktionen (Benutzeraktionen) auf Ereignisse (einer Webseite). Beispielsweise ist die Mausbewegung, das Drücken einer Taste oder das Laden einer Seite ein Event. Alles was in einer Webseite geschieht ist letztendlich ein Event. Ein Event repräsentiert genau den Moment, in dem etwas geschieht.

Beispielsweise bei dem Drücken der Maustaste, signalisiert der Webbrowser ein click-Event genau in dem Moment, in dem man die Maustaste loslässt. Genau in dem Moment in dem der Webbrowser ein Event signalisiert, wird das Event „abgefeuert“.

Der Umgang der Browser mit Ereignissen, wird durch das Ereignismodell festgelegt. Als Standard gilt heute das W3C Standardmodell.

Zu Beginn wird ein Element ausgewählt, auf das ein Event reagieren soll. Der Code sieht so aus

Beim Klicken auf die Schaltfläche (<input>) wird ein Hinweisfenster mit dem Inhalt “Hallo!” ausgegeben.

Maus-Events

click – wird abgefeuert, nachdem die Maustaste gedrückt und wieder losgelassen worden ist
dblclick – Maustaste zwei mal drücken und loslassen
mouseover / mouseout – wenn die Maus über etwas fährt oder davon wegfährt
mousedown / mouseup – wenn die Maus klickt, während sie über einem Element ist, aber noch nicht losgelassen worden ist (down), bzw. an dem die Maustaste wieder losgelassen wird (up)
mousemove – wenn die Maus bewegt wird (also fast die ganze Zeit)

Formular-Events

submit-Event: beim Abschicken eines Formulars vom Benutzer
blur-Event: beim Verlassen eines Textfeldes (nach Eingabe der E-Mail Adresse ins Betreff Feld)
change-Event: wenn sich ein Status ändert (z.B. in einem Drop-down Menü wurde etwas ausgewählt)
reset-Event: gemachte Änderungen werden rückgängig gemacht, das Formular wird wieder in den Zustand versetzt, in dem es sich nach dem Laden der Seite befand
focus-Event: durch Klicken auf ein Textfeld erhält dieses den Fokus (Gegenstück zu blur)

Tastatur-Events

keypress-Event: beim Drücken einer Taste
keydown-Event: unmittelbar vor keypress, beim Drücken einer Taste ausgelöst
keyup-Event: beim Loslassen der Taste

Einbinden durch Funktionen

Um sich Events zunutze zu machen, muss man dem Webbrowser sagen, dass er eine Funktion ausführen soll, wenn ein bestimmtes Event in einem bestimmten Tag auftritt. Nehmen wir als Beispiel folgenden Code:

Hier wird beim Laden der Seite die Funktion test ausgeführt.

Event-Listener
Event-Listener arbeiten nach dem gleichen Prinzip, wie Event-Handler, mit dem Unterschied, dass Elementen jedoch mehrere Event-Listener haben kann. Dadurch können dem Element mehrere Funktionen zugewiesen werden können. Sie werden durch addEventListener() definiert.

Die jQuery-Methode

Ein umfangreiches Event-Modell enthält auch jQuery. Es enthält mehrere Methoden, um Events dynamisch zu binden, erzeugen oder auslösen kann.
Dazu haben wir eine Übung gemacht, die ich nun zeigen möchte.

Wir hatten dazu eine Beispielseite, die wir über CSS-Selektoren gestalten wollten. Die Seite sah anfangs so aus:

Um hier eine kreative Überschrift zu gestalten wird ein bestimmtes Prinzip angewendet. Der Schlüssel ist, ein leeres <span>-Tag in das Überschriften-Tag einzufügen. Mit CSS lässt sich dieses <span>-Tag nun formatieren. Wir legen über die Überschrift ein halb transparentes Bild, um den gewünschten Effekt zu erzeugen. Dazu binden wir zuerst jQuery ein, um dann über den gewohnten $-Befehl alle <span>-Tags auszuwählen und das Bild darüber zu legen. Folgender Code erreicht unser Ziel:

Der Code $(document).ready(function()…) sorgt dabei dafür, dass unser JavaScript Programm erst ausgeführt wird, wenn die Seite geladen ist. Die .prepend()-Funktion fügt den Inhalt direkt nach dem öffnenden Tag des gesuchten Elements ein. Somit wird also in jedes <h2>-Tag ein leeres <span>-Tag eingeführt, worauf ja schließlich unser Selektor arbeitet.

Unser Ergebnis:

Window-Objekt

Die open( ) – Methode öffnet ein neues Fenster oder eine neue Registerkarte. Eine einfache Möglichkeit hierfür ist folgende Struktur:

open (URL, name, eigenschaften)

3 Argumente:

URL der Seite, die im neuen Fenster angezeigt wird
Name des Fensters, den man beliebig wählen kann (gleichen Namensregeln wie für Variablen)
String mit den Einstellungen für das neue Fenster (z.B. die Breite und Höhe)

Fenstereigenschaften

Fenster bestehen aus vielen Teilen, z.B. Scrollbalken, Buttons zur Größenänderung, Symbolleisten, usw. Die Breite, Höhe und Position auf dem Bildschirm kann man durch die open ( )-Methode festlegen. Siehe folgenden Code:

Die Größe und Position werden in Pixel angegeben. Für die anderen Eigenschaften gibt es entweder yes (Eigenschaft aktivieren) oder no (Eigenschaft deaktivieren). Im Folgenden sind ein paar Beispiele aufgelistet:

height – legt die Höhe des Fensters fest
width – legt die Fensterbreite fest
left – bezeichnet die Entfernung des Fensters in Pixeln vom linken Rand des Monitors
top – Entfernung in Pixeln vom oberen Rand des Monitors
scrollbars – erscheinen immer am rechten und unteren Rand, wenn die Seite größer als das Fenster ist

Fensterreferenz verwenden

Geöffnete Fenster können über die entsprechende Referenz gesteuert werden:

Die Varianz neues Fenster enthält in diesem Fall eine Referenz auf das neue Fenster. Anschließend können Sie alle Methoden des Browserfensters auf diese Variable anwenden, um das Fenster zu steuern (beispielsweise das Fenster schließen). Browser unterstützen viele verschiedene Methoden für das Window-Objekt (z.B. close( ), blur ( ), moveBy ( )).

Erweitern der Benutzeroberfläche

Es ist von Vorteil mit JavaScript die Webseite stromlinienförmig aufzubauen und damit Benutzerfreundlich zu gestalten, indem Inhalte versteckt werden, bis sie benötigt werden, und die übrigen Informationen leicht zugänglich zu machen.

Akkordion Panels und Tabbed Panels bringen viele Informationen auf einer kleinen Fläche unter und bieten Besuchern die Möglichkeit, Inhalte portionsweise zu genießen. Tooltipps (Pop-up-Fenster mit zusätzlichen Informationen zu Links und andere HTML Elemente) bieten ergänzende Informationen. Sortierbare Tabellen gestalten die Daten in HTML benutzerfreundlicher, da die Besucher die Daten direkt auf der Seite durch einen Klick auf den Spaltenkopf sortieren können.

Hypertext Preprocessor (PHP)

PHP ist eine Skriptsprache, welche dynamische Webseiten erzeugen, sowie Daten aus Benutzereingaben und Datenbanken verarbeiten kann. PHP-Code kann direkt in ein HTML-Dokument eingebettet werden. Der PHP-Code wird direkt auf dem Server ausgeführt und die Ausgaben des Interpreters werden in das HTML-Dokument eingefügt, welches an den Client geschickt wird.

Asynchronous JavaScript and XML (AJAX)

Ein neues Konzept, welches ermöglicht, Daten vom Server zu erhalten, ohne die Webseite komplett neu laden zu müssen. Dies funktioniert über selbst erzeugte http-Anfragen, deren Server-Antwort dem Script zur Verfügung steht.
Normalerweise sendet der Server als Antwort ein neues HTML-Dokument zurück, welches anstelle des Alten angezeigt wird. Mit AJAX ist es möglich, dass immer nur kleine Schnipsel der Webseite, also die Daten, die sich verändert haben neu geladen werden bzw. auch nur ausgewählte Änderungen dem Server mitgeteilt werden (Asynchrones Laden). Der Browser wird dabei während dem Warten auf die Antwort vom Server nicht blockiert.

Bildergebnis für ajax asynchronous — Quelle: http://www.websiteoptimization.com/secrets/ajax/8-1-ajax-pattern.html

Vorteilhaft ist das Konzept bei sich ständig aktualisierenden Daten, da die Server-Anfragen im Hintergrund gestartet werden können, ohne dass ständig ein neues Dokument geladen werden muss. Auf der anderen Seite kann der User nicht mehr wie gewohnt mit dem Zurück-Button reagieren, da sich die Adresse des Dokumentes nicht geändert hat. Darüber hinaus verlagert AJAX einen großen Teil der Datenverarbeitung auf den Client, der eine entsprechende Leistungsfähigkeit aufweisen muss.

Schau doch gerne bei den Themen des zweiten Semesters vorbei.