26. September 2015

Alter in HTML-Page einbetten

   Embedding age into a HTML page, Java Script, example call.
   Optional use with remote (external) procedure.


Soll zum Beispiel statt des genauen Geburtstages einer Person deren Alter auf einer Webseite eingefügt werden, so muss das erst berechnet werden. Das geht mit Javascript, zum Beispiel mit diesem Kode:

‹script›
function getAge(dateString) {
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    return age;
}
document.write(getAge("1941/11/30"));
‹/script›)


Sie können sich das auf der Vorschaltseite meiner Website ansehen: www.Joern.De

Fritz Jörn (73)

Wenn Sie sich dort allerdings vom Browser den HTML-Kode zeigen lassen, so sehen Sie das Alter am Ende bereits ausgerechnet:
b›Fritz Jörn</b> (script›
function getAge(dateString) {
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    return age;
}
document.write(getAge("1941/11/30"));
‹/script›73)
Das Original stammt von JSfiddle, hier. Hier im Blog, hab’ ich an dieser Stelle noch kein Javascript eingebaut, die 73 bleibt konstant. Wie man Javascript in Blogger einbaut, z. B. hier und gleich beim Weiterlesen.

Man kann Javascript-Routinen auch extern aufrufen, statt sie immer wieder ins HTML einzufügen.
   Zum Probieren habe ich die oben verwendete, kleine Funktion getAge.js auf meine Website gestellt, also genau auf http://joern.de/getage.js – etwa so, wie man dort zum Beispiel auch ein Foto hinstellen könnte, mit der Endung .jpg, siehe http://joern.de/Abroller.jpg. Steuert man http://joern.de/getage.js mit dem Browser direkt an, so bekommt man die Funktion schriftlich zu sehen:
function getAge(dateString) {
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    return age;}
Die Hinweise auf Javascript, ‹script und ‹/script›, kommen in der Funktion nicht vor! Dass Die Funktion getAge.js einen Parameter hat, ist aus dem Namen nicht ersichtlich.
   Auch auf der Seite, die auf diese Funktion Bezug nimmt und sie nutzen möchte, wird zunächst beim Hinweis auf die Funktion (Deklaration) nichts über den oder die Parameter bekannt. Im benutzenden HTML steht nur:
   ‹script src="http://joern.de/getAge.js"›‹script›‹/script›
und zwar irgendwo, im Header oder im Body, egal. Warum ‹script›‹/script› nötig sind, weiß ich nicht. So klappt’s jedenfalls.
   Der eigentliche Aufruf der (externen) Funktion sieht dann so aus, und kann der Deklaration direkt folgen:
   ‹script›
   document.write(getAge("1770/12/17"));
   ‹/script›

Hier habe ich Beetovens Taufdatum, den 17. 12. 1770 eingesetzt.
   Die ganze Sache sieht dann so aus:
    ‹html›
   ‹script src="http://joern.de/getAge.js"›   

   ‹script›‹/script›
   ‹script›
   document.write(getAge("1770/12/17"));
   ‹/script›

Jahre seit Beethovens Taufe in Bonn.
   ‹/body›
   ‹/html›

– normalerweise wie hier im Blog ohne html› und ‹/html› und ohne ‹body und ‹/body› in der Nähe.
   Probieren wir’s mal:
» Jahre seit Beethovens Taufe in Bonn. 
Also noch Jahre bis zu seinem 250. Tauftag.« 
   Sie können sich das ja mit dem Browser im Quellcode ansehen. (Dafür, dass Blogger beim Schriftwechsel soviel Kode generiert, kann ich nichts.) 
 
Link hierher: http://blogabissl.blogspot.com/2015/09/alter-in-html-page-einbetten.html

(Statt Kleiner- und Größerzeichen sind hier ›französische‹ Gänsefüße verwendet, um Blogger nicht durcheinanderzubringen.)

Keine Kommentare: