Wochentag ermitteln – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

Wochentag ermitteln

Um eine Funk­tion zu schrei­ben, die das Da­tum ei­nes Nut­zers an­nimmt, und in ei­nem Satz des­sen Wo­chen­tag aus­gibt, müs­sen ver­schie­de­ne An­for­de­run­gen er­füllt sein.

Ziel dieses Artikels ist es, eine Funktion zu schreiben, die den Nutzer um die Eingabe eines Datums in einem festgelegten Format bittet, und ihm dann den Wochentag des eingegebenen Datums in einem Satz zurückgibt.

Ein Eingabefenster zeigt: "Gib ein Datum in folgendem Format ein:" In der Eingabezeile steht bereits das Format "jjjj-tt-mm"

Das Ausgabefenster zeigt: "Der 7. Juli 2017 ist ein Freitag"

Im Zweifel googlen

Im ersten Dialogfenster soll bereits in der Eingabezeile das Format stehen, in dem der Nutzer das Datum eingeben soll.

jjjj-tt-mm

Wenn ihr die Serie bis hierhin mitgemacht habt, wisst ihr noch nicht, wie das geht.
Diese Situation ist ein ständiger Wegbegleiter des Entwickler-Daseins. Es gibt immer wieder Anforderungen, von denen ihr nicht wisst, wie ihr sie umsetzen sollt.
In solchen Fällen hilft es, sich an die Suchmaschine eurer Wahl zu wenden und Recherche zu betreiben. Es gibt viele, viele Ressourcen im Internet, die genau dafür gemacht sind, Programmierern bei Fragen weiterzuhelfen. Wenn ihr Englisch versteht, steht euch sogar ein Vielfaches der Ressourcen zur Verfügung.
Gute Anlaufpunkte sind zum Beispiel:

  • Stack Overflow, Englisch: Ein Portal, wo Programmierer anderen Programmierern Fragen stellen, wenn sie etwas nicht verstehen oder bei einem Problem nicht weiterkommen. Entwickler aller Erfahrungslevel sind hier anzutreffen. Eine Daumenregel ist: Es gibt keine Frage, die hier nicht schon mal gestellt wurde.
  • MDN, Englisch und Deutsch: Das Mozilla Developer Network enthält weitreichende Dokumentation von JavaScript und anderen Webtechnologien. Die Hauptsprache ist Englisch, aber viele Artikel sind auch auf Deutsch verfügbar.
  • SelfHTML Wiki, Deutsch: SelfHTML war früher eine bekannte deutsche Ressource für alles, was Webentwicklung anging. Die SelfHTML Wiki ist die Modernisierung dieser Seite.
  • W3Schools, Englisch: w3schools enthält umfangreiche Tutorials und Dokumentation für wichtige Webtechnologien.

Neben diesen Webseiten gibt es noch viele weitere, die euch weiterhelfen können.
Oder ihr versucht durch Herumprobieren, selbst die Lösung herauszubekommen.

Falls ihr trotz ausgiebiger Recherche nicht weiterkommt, ist Kreativität die Devise: Entweder schaut ihr, ob es alternative Lösungsansätze gibt, um euer Ziel zu erreichen, oder ihr überlegt, ob ihr die Anforderungen verändert.

Im konkreten Fall sollte das hoffentlich nicht nötig sein.
Öffnet eure Konsole und probiert das Vorhaben umzusetzen. Lest erst weiter, wenn ihr das geschafft habt.

Aufruf vor Implementierung

Die Funktion wird tellDayName genannt. Falls ihr eure Funktion anders benannt habt, ist das selbstverständlich auch zulässig. Ein Name in der Programmierung sollte im Allgemeinen prägnant ausdrücken, was seine Funktion ist; wie genau die Benennung lautet, liegt dann aber in der Regel in der Hand des Programmierers.

function tellDayName() {
  …
}

Ein Eingabefenster wird durch prompt aufgerufen. Text, der in der Eingabezeile dieses Fensters bereits beim Aufruf stehen soll, wird als zweiter Parameter der Funktion übergeben.
Der Rückgabewert wird der Variable dateString zugeordnet.

function tellDayName() {
  var dateString = prompt("Bitte gib ein Datum in folgendem Format ein:", "jjjj-tt-mm");
}

Eine Möglichkeit, ein größeres Vorhaben in zu bewältigende Stücke einzuteilen, ist es, Funktionen aufzurufen, die nicht existieren, aber gebraucht werden. Das erleichtert, den Programmfluss zu konzipieren, ohne sich sofort über die Implementierung Gedanken zu machen.

In der testgetriebenen Entwicklung (Test driven development, TDD) ist diese Vorgehensweise die Regel: Erst werden Tests geschrieben, mit denen überprüft wird, ob ein Modul bei bestimmten Eingaben die gewollten Ausgaben erbringt, und erst anschließend wird anhand dessen das Modul implementiert.

Auf diese Weise ergibt sich von selbst, welche Funktionen überhaupt benötigt werden.

function tellDayName() {
  var dateString = prompt("Bitte gib ein Datum in folgendem Format ein:", "jjjj-tt-mm");
  // Eine Funktion, die den Datumsstring in ein Datumsobjekt umwandelt
  var date = parseDateStr(dateString);
  // Eine Funktion, die den Monatsnamen zurückgibt
  var monthName = getMonthName(date);
  // Eine Funktion, die den Wochentagsnamen zurückgibt
  var dayName = getDayName(date);
  alert("Der " + date.getDate() + ". " + monthName + " " + date.getFullYear() + " ist ein " + dayName);
}

Mit diesem Ablauf werden die Funktionen parseDateStr, getMonthName und getDayName benötigt.

Datumsstring konvertieren

Der Datumsstring besteht aus drei Teilen: Dem Jahr, dem Monat und dem Tag. Der Nutzer kann potentiell auch einen beliebigen anderen Inhalt eingeben, aber da das kein Code ist, der irgendwo live geht, wird solches Nutzerverhalten an dieser Stelle ignoriert.
Die drei Teile sind durch einen Bindestrich voneinander getrennt. Die split-Methode kann daran den String in ein Array spalten.
Die drei Teile können in der gleichen Reihenfolge dem Date-Konstruktor übergeben werden. Durch die automatische Konvertierung von Strings in Zahlen, wenn Strings einen Zahlenwert beinhalten und dieser gebraucht wird, muss hier nicht extra parseInt aufgerufen werden – sauberer wäre es allerdings.

function parseDateStr(dateStr) {
  var dateParts = dateStr.split("-");
  return new Date(dateParts[0], dateParts[1], dateParts[2]);
}

Wenn die Funktion getestet wird, fällt auf, dass das Datum falsch ist.

parseDateStr("2017-07-07");
// => "Mon Aug 07 2017 00:00:00 GMT+0200 (CEST)"

Da der Monat dem Date-Konstruktor als Index übergeben wird und deswegen bei Null beginnt, muss noch 1 vom Monatswert abgezogen werden.

return new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);

Dann gibt die Funktion das gewünschte Ergebnis aus.

parseDateStr("2017-07-07");
// => "Mon Jul 07 2017 00:00:00 GMT+0200 (CEST)"

Monatsnamen zurückgeben

Im letzten Artikel der Serie wurde diese Funktion mit dem switch-Steuerkonstrukt implementiert.
Die Umsetzung mit einem Array ist allerdings kürzer und direkter.

function getMonthName(date) {
  var monthNames = "Januar Februar März April Mai Juni Juli August September Oktober November Dezember".split(" ");
  return monthNames[date.getMonth()];
}

// Testen

getMonthName(parseDateStr("2017-07-07"));
// => "Juli"

Wochentagsnamen zurückgeben

Der Index des Wochentags wird mit der getDay()-Methode eines Datums ausgegeben. Da in den USA die Wochen am Sonntag beginnen, hat Sonntag den Index 0.

function getDayName(date) {
  // In den USA beginnen Wochen am Sonntag
  // Deswegen hat Sonntag den Index 0
  var dayNames = "Sonntag Montag Dienstag Mittwoch Donnerstag Freitag Samstag".split(" ");
  return dayNames[date.getDay()];
}

// Testen

getDayName(parseDateStr("2017-07-07"));
// => "Freitag"

Zusammenführung

Die drei fehlenden Funktionen sind nun implementiert. Wenn tellDayName ausgeführt wird, müsste die Funktion erfolgreich durchlaufen.
Probiert es aus und spielt damit herum. Wenn ihr Ideen für Veränderungen habt und nicht wisst, wie ihr sie umsetzen könnt, wisst ihr nun, wie ihr danach suchen müsst.