« »

Alter berechnen nur mit JavaScript

1. Februar 2009 Roland

Dieser Artikel ist Teil 3 von 26 der Artikelserie Programmieren

Programmieren

In Variablenzuweisungen und Berechnungen haben wir die Eingabefelder für das Geburtsdatum erstellt. Jetzt wollen wir eine Berechnung für das Alter in Tagen erstellen.

Modifikationen an der bestehenden Oberfläche

Die Eingabefelder (mit id=”day”, id=”month” und id=”year” im HTML Code gekennzeichnet) können uns die notwendigen Werte liefern. Im Variablen Übung Teil 2 seht ihr die modifizierte Eingabeoberfläche. Ich habe einen Paragraph mit der id=”dynamic_message” eingefügt. In diesem Paragraph werden wir dass Alter oder eventuell auftretende Fehlermeldungen ausgeben. Bei der Jahreseingabe habe ich noch ein onblur=”calculateAgeInDays()” Attribut und ein onchange=”calculateAgeInDays()” Attribut eingeführt. Das onblur Attribut sorgt dafür, dass beim Verlassen der Jahreseingabe die JavaScript Funktion calculateAgeInDays() aufgerufen wird. Das onchange Attribut startet die Berechnung sobald sich das Jahr verändert. Die Javascript Funktion habe ich in einer extra Datei “variablen_uebung_2.js” eingefügt. Und im Head der HTML Datei sorge ich mit <script type=”text/javascript” src=”variablen_uebung_2.js”></script> dafür, dass die JavaScript Datei geladen wird.

Die Javascript Datei

Hier habe ich zwei Funktionen geschrieben. Die Funktion calculateAgeInDays() liest aus der Oberfläche die Eingabevariablen aus, ruft die Funktion checkDate() auf und generiert die entsprechende Ausgabe. Die Funktion checkDate() kontrolliert, ob dass vom Anwender eingegebene Datum überhaupt einem korrekten Datum entspricht. Ein 30. Februar gibt es nie. Falls der Februar kein Schaltjahr ist und dennoch ein 29. Februar ausgewählt wurde, mögen wir das auch nicht. Somit können wir sicher stellen, dass die meisten Falscheingaben des Anwenders verhindert werden.

Hier der JavaScript Code:

  1. /**
  2.  * Berechnet das Alter eines Menschen in Tagen.
  3.  * Diese Funktion ließt die Variablen day, month und year aus der Oberfläche
  4.  * aus.
  5.  */
  6. function calculateAgeInDays(){
  7.     var birthDay = parseInt(document.getElementById("day").value);
  8.     var birthMonth = parseInt(document.getElementById("month").value);
  9.     var birthYear = parseInt(document.getElementById("year").value);
  10.     if(checkDate(birthYear, birthMonth, birthDay) == false){
  11.         document.getElementById("dynamic_message").innerHTML
  12.         = "Dieses Datum ("
  13.           +birthDay
  14.           +"."
  15.           +birthMonth
  16.           +"."
  17.           +birthYear
  18.           +") gibt es nicht";
  19.         return;
  20.     }
  21.     // Das Datum scheint korrekt zu sein.
  22.     // Subtrahiere vom aktuellen Datum das übergebene Datum.
  23.     var currentDate = new Date();
  24.     var birthDate = new Date(birthYear, birthMonth-1, birthDay);
  25.     var delta = currentDate.getTime() – birthDate.getTime();
  26.     // Ein Tag ist 1000*60*60*24 Millisekunden.
  27.     var ageInDays = delta / (1000*60*60*24);
  28.     // Beim Runden wird der aktuelle Tag hinzugefügt. Also einen Tag weniger.
  29.     var ageInDays = Math.round(ageInDays)-1;
  30.     document.getElementById("dynamic_message").innerHTML
  31.     = "Du bist "+ageInDays+" Tage alt";
  32. }
  33.  
  34. /**
  35.  * Kontrolliert, ob mit den übergebenen Variablen day, month, year ein
  36.  * vernünftiges Datum dargestellt werden kann. Beispielsweise kann Februar
  37.  * keine 31 Tage haben.
  38.  * @param year Der Integer Wert des Jahres.
  39.  * @param day Der Integer Wert des Tages.
  40.  * @param month Der Integer Wert des Monats.
  41.  * @return true Die Zahlen stellen ein korrektes Datum dar, ansonsten false.
  42.  */
  43. function checkDate(year, month, day){
  44.     // Beim Date Objekt werden Monate von 0 bis 11 gezählt.
  45.     month = month-1;
  46.     // Date generiert ein Datum auch mit falschen Zahlenwerten.
  47.     // So wird z.B. 2009, 11, 31 ein Datum 2009, 12, 1 erzeugen.
  48.     var checkDate = new Date(year, month, day);
  49.     if(   (checkDate.getDate() == day)
  50.        && (checkDate.getMonth() == month)
  51.        && (checkDate.getFullYear() == year)
  52.       ){
  53.         return true;  
  54.     }
  55.     return false;
  56. }

Frage an die Kursteilnehmer

Die hier vorgestellte Lösung hat zwar unseren Auftrag dass Alter eines Menschen in Jahren zu ermitteln, aber irgendwie ist es noch nicht rund. Könnt ihr mir bitte sagen was wir noch alles besser machen können? Fragestellungen sind unter Anderem:

  • Was passiert, wenn kein JavaScript im Browser aktiviert ist?
  • Wie können wir dass umbauen, wenn kein JavaScript vorhanden ist?
  • Wie könnte die Eingabe und die Datenüberprüfung für den Anwender besser gestaltet werden? (Tipp: Die Reihenfolge der Auswahlboxen könnte eventuell verändert werden)
Merken und weiterempfehlen Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können.
  • Technorati
  • Wikio DE
  • Webnews
  • MisterWong
  • Y!GG
  • Digg
  • del.icio.us

Der Beitrag wurde am Sonntag, den 1. Februar 2009 um 00:57 Uhr veröffentlicht und wurde unter Programmieren abgelegt.
Kurzlink: http://www.baldenhofer.eu/blog/?p=108

Dir gefiel der Artikel? Dann abonniere doch den RSS Feedrss

Du kannst die Kommentare zu diesem Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

3 Reaktionen zu “Alter berechnen nur mit JavaScript”

  1. Jozo sagt:
    11. Februar 2009 um 11:27

    Fügt man z.B. einen Button ein, welcher calculateAgeInDays() ausführt, ist dieser bei deaktiviertem JavaScript zwar noch vorhanden allerdings führt er nicht mehr die Berechnung aus.

    Es gibt Möglichkeiten zu prüfen ob im BrowserJavaScript aktiviert ist, und je nachdem kann man alternativ PHP anzeigen bzw. auf eine Seite verweisen wo diese Funktionen dann wieder mit Hilfe von PHP verfügbar sind…dadurch entsteht aber doppelter Code.
    Man kann natürlich auch Meldungen ausgeben in denen der Benutzer die Info erhält JavaScript zu aktivieren…was aber auch nicht sehr Benutzerfreundlich ist…
    Ich wäre dafür diese Funktion mit Hilfe von PHP zu lösen.
    Ist zwar von der Geschwindigkeit langsamer, aber man ist auf der sicheren Seite. oder?

    Man könnte doch zu jedem Monat nur die passenden Tage anzeigen lassen. Man wählt z.B. zuerst Februar und erhält dann auch nur 28 Tage zur Auswahl.

  2. Joscha sagt:
    13. Februar 2009 um 00:34

    Habe den Code getestet und verbessert. So wie er oben steht, funktioniert er bei mir.

    Änderungen waren: Selectfelder in eine <form id="identifier"></form> stecken und über die ID des form und dann über die id des select Feldes anzusprechen, statt eine parseint Abfrage zu starten, wie Roland es vorgeschlagen hat. Parseint funktioniert für Edit und andere Felder, aber nicht für Select. HTML Code gekennzeichnet) können uns die notwendigen Werte liefern.

    Im Variablen Übung Teil 2 seht ihr die modifizierte Eingabeoberfläche. Ich habe einen Paragraph mit der id=”dynamic_message” eingefügt. In diesem Paragraph werden wir dass Alter oder eventuell auftretende Fehlermeldungen ausgeben. Bei der Jahreseingabe habe ich noch ein onblur=”calculateAgeInDays()” Attribut und ein onchange=”calculateAgeInDays()

    Außerdem habe ich eine Zeile in der Funktion hinzugefügt, die das eingegebene Alter überprüft, weil die getYear function bei mir für 19XX Jahre jeweils nur XX zurückgegeben hat. Also habe ich eine OR Bedingung eingefügt, die überprüft ob alle vier oder wenigstens die letzten zwei Zeichen übereinstimmen.

    Viel Spaß!

    Hallo Joscha,
    ich habe mir deinen Kommentar nun mehrmals durchgelesen und glaube allmählich verstanden zu haben, was du mir eigentlich sagen willst.
    Mir ist klar geworden, dass der Unterschied zwischen HTML und JavaScript Komponenten nicht klar ist. Aus diesem Grund werde ich nach der dritten Übung verstärkt auf die Grundlagen eingehen.
    Pareint ist eine JavaScript Funktion die aus einem String den entsprechenden Zahlenwert, falls vorhanden, ausliest. Das klappt bei allen nur denkbaren Elementen die im HTML-Dokument vorhanden sind. Pareint gibt es annähernd bei allen Programmiersprachen. Wenn du einen String hast ist das nicht zwingend notwendigerweise eine Zahl. Mit Funktionen, wie Parseint, werden Strings in Zahlen umgewandelt. Ich werde auf alle Fälle auf Typsicherheit und so weiter eingehen.
    Bis denne

    Roland

  3. Roland sagt:
    15. Februar 2009 um 08:54

    Hallole!
    Ute hat gestern den Joscha Text so angepasst, dass man den Inhalt lesen kann. Vielen Dank dafür.
    Joscha und Jozo:
    Wenn ihr irgend etwas ändert, dann schreibt bitte einen neuen Blogeintrag und hängt ihn an. Oder kommentiert eure Änderungen nur.
    Im Original Blogeintrag solltet ihr keine allzugroßen Änderungen vornehmen.
    Beispielsweise war in diesem Blogeintrag im Einbinden von Javascript ein nicht valider Aufbau vorhanden. Vorher war hier