Tag, Monat, Jahr Select erstellen mit JavaScript

In diesem Beitrag geht es darum, wie du ein bzw. mehrere Selects erstellen kannst, in denen der User ein Datum nach Tag, Monat und Jahr auswählen kann, wie es in vielen Webformularen vorkommt.

Es wird wie immer, zuallererst das HTML benötigt. Die HTML-Elemente bestehen in diesem Fall aus drei verschiedenen Selects:

<label>Tag</label>
<select id="day" name="day" value=""></select>

<label>Monat</label>
<select id="month" name="month" value=""></select>

<label>Jahr</label>
<select id="year" name="year" value=""></select>

Kommen wir im nächsten Schritt zum JavaScript: Letztendlich benötigen wir für alle drei Selects auch drei verschiedene Funktionen um die Selects befüllen zu können.

Die drei Funktionen sind nach demselben Prinzip aufgebaut. Die Variablen optionsDay, optionsMonth und optionsYear sind zunächst leer. Allerdings nur so lange bis sie durch die darauf folgende for-Schleife befüllt werden. In der Bedingung für die for-Schleife werden der Start- (var day = 1) und der Endwert (day <= 31) angegeben. Durch den Inkrement-Operator (day++) wird der Operand day um den Wert 1 erhöht bis er bei dem vorgegebenen Endwert 31 angekommen ist.

Innerhalb der for-Schleife wird nun die zuvor leere Variable optionsDay befüllt. Hierbei wird für jeden Wert zwischen dem Start- und dem Endwert ein option-Feld erzeugt. In diesem Fall also jeweils ein option-Feld für die Zahlen von 1 – 31.

In der letzten Zeile der jeweiligen Funktion werden nun die Variablen optionsDay, optionsMonth oder optionsYear ihrem „Bestimmungsort“ zugeordnet. In diesem Fall soll die Variable optionsDay innerhalb des HTML-Elements mit der id day dargestellt werden.

var optionsDay = "";

for (var day = 1 ; day <= 31; day++) {
  optionsDay += "<option>"+ day +"</option>";
}
document.getElementById("day").innerHTML = optionsDay;

Das Befüllen des Selects Monat geschieht nach genau demselben Prinzip, wie beim Select für die Tage. Der einzige logische Unterschied: Der Start- und Endwert entsprechen der Anzahl der Monate.

var optionsMonth = "";

for (var month = 1 ; month <= 12; month++) {
  optionsMonth += "<option>"+ month +"</option>";
}
document.getElementById("month").innerHTML = optionsMonth;

Beim Select Jahr verhält sich die Funktion auch nicht viel anders als wie die beim Tag oder Monat Select. Der kleine aber feine Unterschied ist der Endwert, welcher dynamisch durch das aktuelle Jahr erzeugt wird. Das aktuelle Jahr erhalten wir durch die new Date().getFullYear() Methode.

var optionsYear = "";

for (var year = 1900 ; year <= new Date().getFullYear(); year++) {
  optionsYear += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = optionsYear;

Ergebnis:

Zusatz

Die jeweiligen Werte für den Start- und Endwert können natürlich auch als Variable gespeichert werden. Um Codezeilen zu sparen, habe ich für dieses Beispiel darauf verzichtet. Im nächsten Schritt könnte man das Script noch insofern erweitern, dass bei dem jeweils ausgewählten Monat, auch nur die entstprechende Anzahl an Tagen die der Monat hat, angezeigt wird. Also beim Monat Februar werden nur 28 Tage zur Auswahl gestellt. Fortsetzung folgt…

Die Geburt des Internets

Der britische Wissenschaftler des europäischen Kernforschungszentrums CERN Tim Berners-Lee gilt als Erfinder des World Wide Web’s. Ursprünglich wurde das Internet konzipiert und entwickelt, um die Nachfrage nach automatischem Informationsaustausch zwischen Wissenschaftlern an Universitäten und Instituten auf der ganzen Welt zu befriedigen.

Die erste Website am CERN – und in der Welt – war dem World-Wide-Web-Projekt selbst gewidmet und wurde auf Berners-Lees NeXT-Computer gehostet. Die Website beschreibt die grundlegenden Funktionen des Internets; wie man auf Dokumente anderer Leute zugreift und wie man seinen eigenen Server einrichtet. Die NeXT-Maschine – der ursprüngliche Webserver – ist immer noch am CERN. Im Rahmen des Projekts zur Wiederherstellung der ersten Website hat das CERN im Jahr 2013 die erste Website der Welt an der ursprünglichen Adresse wiederhergestellt. Tim Berners-Lee 1990 © CERN Genf

Schau dir die erste Website der Welt an

Am 30. April 1993 stellte CERN die World Wide Web-Software in den öffentlichen Bereich. CERN machte die nächste Version mit einer offenen Lizenz verfügbar, um die Verbreitung zu maximieren. Durch diese Aktionen, das Erstellen der Software, die benötigt wird, um einen Webserver frei verfügbar zu machen, zusammen mit einem grundlegenden Browser und einer Bibliothek von Code, wurde das Web florieren gelassen.

Der line-mode-Browser

Zwar erstellte Berners-Lee 1990 ebenfalls den ersten Browser (WorldWideWeb2), doch arbeitete der nur in NeXT-Betriebssystemen. Es wurde zunehmend wichtiger, dass das Web für viele Arten von Computern zugänglich sein sollte, nicht nur für NeXT-Maschinen.

Hier kam der line-mode-Browser ins Spiel. Es war der erste Webbrowser mit einer plattformübergreifenden Codebasis, so dass er auf vielen verschiedenen Arten von Computern installiert werden konnte. Es war eine relativ einfache Software mit einer sehr einfachen Benutzeroberfläche, aber in den frühen Tagen des Internets war es hilfreich, die Macht dieses neuen Mediums zu demonstrieren. line-mode-browser

Schau dir den line-mode-browser an

CSS: Link mit ausfahrendem Unterstrich

Mit wenigen Zeilen Code einen einfachen und optisch ansprechenden Hovereffekt für Links erstellen. So geht’s: Zunächst benötigen wir einen Textlink.

<a href="#">Hover me</a>

Im nächsten Schritt erstellen wir das CSS. Bei den CSS-Eigenschaften zum Link ist es wichtig, dass der Link als Blockelement dargestellt wird. Andernfalls würde der Unterstrich größer werden als der eigentliche Link.

a {
  display         : inline-block;
  color           : #000;
  cursor          : pointer;
  text-decoration : none;
}

Sofern wir den Link als HTML-Element und dessen CSS-Eigenschaften erstellt haben kommen wir zum eigentlichen Kernstück dieser CSS-Animation, dem Pseudoelement.

Das Pseudoelement stellt den Unterstrich des Links dar. Damit er sich unterhalb des Texts befindet, kommt das ::after Element zum Einsatz.

a::after {
  content                            : "";
  display                            : block;
  margin                             : 0 auto;
  width                              : 0%;
  height                             : 2px;
  background                         : #000;
  -webkit-transition-duration        : .5s;
  -o-transition-duration             : .5s;
  transition-duration                : .5s;
  -webkit-transition-property        : all;
  -o-transition-property             : all;
  transition-property                : all;
  -webkit-transition-timing-function : ease;
  -o-transition-timing-function      : ease;
  transition-timing-function         : ease;
}

Die wichtigsten CSS-Eigenschaften des Pseudoelements sind die Höhe, Breite und die Margin. Zwar wird das Pseudoelement am Ende wie ein Unterstrich aussehen (wie bei text-decoration: underline). Im Grunde handelt es sich aber einfach um eine Fläche mit sehr geringer Höhe.
Um den Unterstrich mittig auszurichten und ihn vor allem mittig ausfahren zu lassen, ist die Eigenschaft margin: 0 auto; bzw. margin: auto; nötig. Falls du den Unterstrich von der linken oder rechten Seite ausfahren lassen möchtest, kannst du margin-left: auto; bzw. margin-right: auto; verwenden.

Für das geschmeidige Ausfahren des Unterstrichs benötigen wir die Transition Eigenschaften. Andernfalls würde der Unterstrich nur nach dem Lichtschalterprinzip aus- und wieder angehen und nicht „ausfahren“.

Ohne den Hover-Efekt ist unser bisheriger Code unbrauchbar. Beim hovern über den Link, nimmt das Pseudoelement 100% der Breite seines Elternelements ein.

a:hover::after {
  width: 100%;
}

Ergebnis

Hover me

Zusatz

Mit margin-top kann der Abstand zwischen dem Link und dem Unterstrich gesteuert werden. Außerdem kann es in einigen Browsern zu einem Darstellungsfehler in der Stärke des Unterstrichs kommen. Dabei wird der Strich 1 – 2px zu hoch dargestellt. Durch eine Skalierung des Pseudoelements transform: scaleY(0.9); kann der Fehler vermieden werden.

a::after {
  margin                             : -5px auto 0 auto;
  -webkit-transform                  : scaleY(0.9);
  -ms-transform                      : scaleY(0.9);
  transform                          : scaleY(0.9);
}

Zusammenfassung

<a href="#">Hover me</a>
a {
  display         : inline-block;
  color           : #000;
  cursor          : pointer;
  text-decoration : none;
}

a::after {
  content                            : "";
  display                            : block;
  margin                             : 0 auto;
  width                              : 0%;
  height                             : 2px;
  background                         : #000;
  -webkit-transition-duration        : .5s;
  -o-transition-duration             : .5s;
  transition-duration                : .5s;
  -webkit-transition-property        : all;
  -o-transition-property             : all;
  transition-property                : all;
  -webkit-transition-timing-function : ease;
  -o-transition-timing-function      : ease;
  transition-timing-function         : ease;
  -webkit-transform                  : scaleY(0.9);
  -ms-transform                      : scaleY(0.9);
  transform                          : scaleY(0.9);
}

a:hover::after {
  width: 100%;
}

JavaScript Altersabfrage

Bedenke, dass dieses Script nur die Eingabe des Users mit einem bestimmten Zahlenwert vergleicht. Um deine Website wirklich für minderjährige Besucher unzugänglich zu machen, ist dieses Script nicht geeignet.

Wem eine einfache Überprüfung für seine Website reicht, kann gerne weiter lesen.

Zunächst benötigen wir, wer hätte es gedacht, ein Eingabefeld. Im konkreten Anwendungsfall ist der Einsatz eines Overlays oder Ähnliches für die Platzierung des Eingabefelds sicherlich sinnvoll, damit der User die Altersabfrage nicht einfach umgehen kann.

Bitte gib dein Alter an:  

<input type="text" name="userAge" id="userAgeInput" value="">

<button type="button" id="submitAge" onclick="checkAge()">Alter überprüfen</button>

Beispiel: Überprüfung nach Alter

Hierbei handelt es sich um die „einfachste“ Variante das Alter des Users zu überprüfen. In der Variable userAge wird der Value also die Eingabe des Users gespeichert und anschließend an die darauf folgende Funktion übergeben bzw. dort ausgelesen. Die Funktion besteht aus zwei Bedingungen und deren entsprechenden else-Blöcken. In der ersten wird geprüft ob der User eine Eingabe getätigt hat. Wenn dies zutrifft wird die Eingabe mit dem Wert der Volljährigkeit (in diesem Beispiel 18) verglichen. Je nach Wert der Eingabe des Users wird ein entsprechendes alert ausgegeben.

function checkAge() {	

 var userAge = document.getElementById('userAgeInput').value;

    if (userAge !== "") {
      if (userAge > 18 || userAge == 18) {
        alert("Du bist volljährig.");
      } else if (userAge < 18) {
        alert("Du bist noch nicht volljährig."); 
      }
    } else {
      alert("Bitte gib dein Alter an.");
    } 
}

Ergebnis

Bitte gib dein Alter an:

Beispiel: Überprüfung nach Geburtsjahr

In diesem Beispiel erfährst du, wie du die Volljährigkeit deiner Websitebesucher anhand des Geburtsjahrs überprüfen kannst. Es kann wie im obigen Beispiel ein ganz normales Input-Feld verwendet werden. Es macht allerdings mehr Sinn wenn dem User eine "Vorauswahl" mittels Select zur Verfügung gestellt wird.

Wie du das Select dynamisch für Tag, Monat und oder Jahr befüllen kannst, erfährst du hier.

Bitte gib dein Geburtsjahr an:

<select id="birthYear" name="birthYear" value="">
</select>
  
<button type="button" id="submitAge" onclick="checkAge()">Alter überprüfen</button>
function checkAge() {	

var userAge = new Date().getFullYear() - document.getElementById("birthYear").value;

  if ( userAge > 18 || userAge == 18 ) {
    alert( "Du bist volljährig." );   
  } else {
    alert( "Du bist noch nicht volljährig." );  
  }
}

Ergebnis

Beispiel: Überprüfung nach Geburtsdatum

Ergebnis

Bitte gib dein Geburtsdatum an: