Guggat emol Blog» Einbinden der JavaScript Timer Klasse in eine Webseite http://www.baldenhofer.eu/blog Roland bloggt über IT, Programmieren und Linux Wed, 08 Sep 2010 11:34:29 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Einbinden der JavaScript Timer Klasse in eine Webseite http://www.baldenhofer.eu/blog/it/programmieren/einbinden-der-javascript-timer-klasse-in-eine-webseite http://www.baldenhofer.eu/blog/it/programmieren/einbinden-der-javascript-timer-klasse-in-eine-webseite#comments Thu, 12 Mar 2009 12:22:50 +0000 Roland http://www.baldenhofer.eu/blog/?p=632 Dieser Artikel ist Teil 19 von 26 der Artikelserie Programmieren

Ich habe im Artikel Mit JavaScript einen wiederkehrenden Timer erzeugen eine Klasse beschrieben, mit der wir einen wiederkehrenden Event ausführen können. Diese Klasse möchte ich nun in einem Webauftritt einbinden.
Der Quellcode der Klasse wird in der Datei timer.js abgespeichert. In jedem Webauftritt kann sie nun mit der Zeile <script language=”JavaScript” src=”timer.js”>
</script> eingebunden werden.

Eininden des Webauftritt spezifischen Codes

Die Klasse stellt nur den Code für einen wiederkehrenden Event dar. Unsere Logik für den jeweiligen Webauftritt sollten wir auch noch in eine Datei auslagern. In der HTML Datei sollte nur die Einbindung der JavaScript Sourcen vorhanden sein. Der JavaScript Quellcode verursacht ansonsten unleserlichen und schlecht zu wartenden Code.
Ich nenne meine Webauftritt bezogenen Sourcen immer so ähnlich wie den Webauftritt selbst. Wenn der Webauftritt zum Beispiel baldenhofer.eu lautet, dann könnte die spezifische Logik hierzu in baldenhofer.js abgelegt werden. So ist immer klar zu welchem Webauftritt diese Sourcen gehören.
Wenn wir also zum Beispiel jede Minute unseren Webseitenbetrachter mit einer Alert Box nerven wollen, dann können wir eine Datei (baldenhofer.js) mit folgendem Inhalt erstellen:

  1. /**
  2.  * Die folgende Funktion zeigt wie die Timerklasse initialisiert werden muß.
  3.  */
  4. function initApp(){
  5.     var timeObject = new Timer();
  6.     timeObject.setEventTime(60000);
  7.     timeObject.setEventFunction("alarm()");
  8.     timeObject.processEvent();
  9. }
  10.    
  11. /**
  12.  * Diese Funktion soll alle 60 Sekunden aufgerufen werden.
  13.  */
  14. function alarm(){
  15.     alert("Hi, du bist jetzt schon eine Minute hier. Aufwachen!!!");
  16. }

Diese Datei binden wir mit <script language=”JavaScript” src=”baldenhofer.js”>
</script> ein. Natürlich müssen wir auch die vorher beschriebene timer.js mit einbinden, da wir ja auf Timer zugreifen wollen.
Damit die initApp() Funktion auch gestartet wird, binden wir den Aufruf in unserem body-Tag des HTML Dokuments ein.
<body onload=”initApp()”>…
</body>
Jetzt wird die Applikation beim Laden des HTML Dokuments initialisiert und gestartet. Jede Minute wird unser armer Besucher nun mit einem Alert() genervt.

Ähnliche Beiträge

www.baldenhofer.eu © seit 2009
Dieser Feed kommt vom Guggat emol Blog, viel Spaß beim Lesen! Über Links zu Artikeln freuen wir uns, jedoch bitte bindet nicht einfach unsere Inhalte in eure Seite ein, danke. Hinweis für Feedleser: Beiträge, die Quellcode enthalten sind auf der Webseite meist besser lesbar, als in einem Feed-Reader.
4e3744397ab2a417f811b29573bcbef4)]]> http://www.baldenhofer.eu/blog/it/programmieren/einbinden-der-javascript-timer-klasse-in-eine-webseite/feed 0 Mit JavaScript einen wiederkehrenden Event erzeugen http://www.baldenhofer.eu/blog/it/programmieren/mit-javascript-einen-wiederkehrenden-event-erzeugen http://www.baldenhofer.eu/blog/it/programmieren/mit-javascript-einen-wiederkehrenden-event-erzeugen#comments Tue, 10 Mar 2009 08:38:43 +0000 Roland http://www.baldenhofer.eu/blog/?p=628 Dieser Artikel ist Teil 17 von 26 der Artikelserie Programmieren

Irgendwann im Hotelzimmer hatte ich irgendwie Lust mal wieder irgend einen Quatsch zu programmieren. Also erfand ich ein kleines Telespiel bestehend aus HTML als Dokumententräger, SVG für die Grafik und JavaScript für die Spielsteuerung.
Naja, Telespiel ist vielleicht ein bisschen hochtrabend. Es handelt sich hierbei um einen Ball der in einer gewissen Geschwindigkeit auf dem Bildschirm rumfliegt und dem du ausweichen musst.

Timer Klasse

Wenn man einen Ball über den Bildschirm fliegen lassen will, dann sollte dieser auch fliegen wenn keine Taste gedrückt wird. Klingt gut gelle?
Um das zu erzeugen habe ich eine kleine Klasse geschrieben die diese Funktionalität für uns kapselt. Du kannst diese Klasse nicht nur zum Bälle fliegen lassen verwenden, sondern immer dann wenn du einen Event in einem regelmässigen Zeitraum benötigst.
Vorab noch gesagt: In JavaScript gibt es eigentlich keine Klassen. Mit dem hier vorgestellten Aufbau kann man jedoch eine Art Kapselung erreichen die einer Klasse sehr nahe kommt.

Klasse als UML Diagramm

Hier die Klasse in UML Schreibweise:
UML Diagramm der Timer Klasse.

Methoden der Klasse

Die Methoden sind:

Timer

Stellt den Konstruktor dar, den wir in unseren Programmen zum Initialisieren der Timerklasse verwenden.

setEventTime

Setzt den Zeitintervall nach dem unser wiederkehrender Event aufgerufen werden soll.

getEventTime

Liefert den aktuell gespeicherten Zeitintervall zurück.

setEventFunction

Setzt den Namen der Funktion, die wir wiederkehrend aufrufen wollen.

getEventFunction

Liefert den aktuell eingetragenen Namen der Funktion, die wiederkehrend aufgerufen werden soll, zurück.

processEvent

Startet die Verarbeitung. Nach Aufruf dieser Methode wird die EventFunktion wiederkehrend aufgerufen.

  1. /**
  2.  * Mit dieser Klasse können Events Zeitgesteuert aufgerufen werden.
  3.  * Es kann mit setEventTime() die Zeitspanne in ms eingegeben werden.
  4.  * Nach dieser Zeitspanne wird die Funktion, die mit setEvent() gesetzt
  5.  * wurde, aufgerufen.
  6.  */
  7. function Timer(){
  8.     // Angabe in welchen Zeitabständen der Event ausgelöst werden soll.
  9.     this.eventTime;
  10.     // Speichert den Namen der Funktion ab, die nach Ablauf
  11.     // der Zeitspanne aufgerufen werden soll.
  12.     this.eventFunction;
  13. }
  14.  
  15. /**
  16.  * Setzt die Zeitspanne in ms nach der die Eventfunktion aufgerufen
  17.  * werden soll.
  18.  * @param eventTime Die Zeitspanne in ms.
  19.  */
  20. Timer.prototype.setEventTime = function(eventTime){
  21.     this.eventTime = eventTime;
  22. }
  23.  
  24. /**
  25.  * Liefert die Zeitspanne zurück.
  26.  * @return Die gesetzte Zeitspanne in ms.
  27.  */
  28. Timer.prototype.getEventTime = function(){
  29.     return this.eventTime;
  30. }
  31.  
  32. /**
  33.  * Setzt den Namen der Funktion, die nach Ablauf der Zeitspanne
  34.  * wiederkehrend aufgerufen werden soll.
  35.  * @param eventFunction Der Name der Eventfunktion.
  36.  */
  37. Timer.prototype.setEventFunction = function(eventFunction){
  38.      this.eventFunction = eventFunction;
  39. }
  40.  
  41. /**
  42.  * Liefert den Namen der Eventfunktion zurück.
  43.  * @return Der Name der Eventfunktion.
  44.  */
  45. Timer.prototype.getEventFunction = function(){
  46.     return this.eventFunction;
  47. }
  48.  
  49. /**
  50.  * Sorgt dafür, dass der Event wiederkehrend ausgeführt wird.
  51.  */
  52. Timer.prototype.processEvent = function(){
  53.     window.setInterval(this.eventFunction, this.eventTime);
  54. }

Diese Klasse kannst du nun nehmen um wiederkehrende Abläufe darzustellen.
Ich habe keine Übergabeüberprüfungen eingebaut. Wenn du also Mist übergibst, funktioniert diese Klasse nicht. Eventuell willst du das noch verbessern…

Aufruf der Klasse

Hier ein kleines Beispielprogramm, mit dem du diese Klasse zum Leben erwecken kannst:

  1. /**
  2.  * Die folgende Funktion zeigt wie die Timerklasse initialisiert werden muß.
  3.  */
  4. function initApp(){
  5.     var timeObject = new Timer();
  6.     timeObject.setEventTime(10000);
  7.     timeObject.setEventFunction("alarm()");
  8.     timeObject.processEvent();
  9. }
  10.  
  11. /**
  12.  * Diese Funktion soll alle 10 Sekunden aufgerufen werden.
  13.  */
  14. function alarm(){
  15.     alert("hi");
  16. }

Ähnliche Beiträge

www.baldenhofer.eu © seit 2009
Dieser Feed kommt vom Guggat emol Blog, viel Spaß beim Lesen! Über Links zu Artikeln freuen wir uns, jedoch bitte bindet nicht einfach unsere Inhalte in eure Seite ein, danke. Hinweis für Feedleser: Beiträge, die Quellcode enthalten sind auf der Webseite meist besser lesbar, als in einem Feed-Reader.
4e3744397ab2a417f811b29573bcbef4)]]> http://www.baldenhofer.eu/blog/it/programmieren/mit-javascript-einen-wiederkehrenden-event-erzeugen/feed 5 Mit HTML, oder SVG, interaktive Ein- Ausgaben erstellen http://www.baldenhofer.eu/blog/it/programmieren/mit-html-oder-svg-interaktive-ein-ausgaben-erstellen http://www.baldenhofer.eu/blog/it/programmieren/mit-html-oder-svg-interaktive-ein-ausgaben-erstellen#comments Sat, 21 Feb 2009 22:19:16 +0000 Roland http://www.baldenhofer.eu/blog/?p=222 Dieser Artikel ist Teil 10 von 26 der Artikelserie Programmieren

Wir beschränken uns in den nächsten Betrachtungen auf HTML, und eventuell noch auf SVG, um mit dem Anwender in Kontakt zu treten.
In HTML haben wir diverse Möglichkeiten vom Anwender Informationen entgegenzunehmen. Unter anderem sind dies:

  • Input Elemente
  • Select Elemente
  • Listenauswahlen
  • Checkboxen
  • Submit Buttons

Wenn wir uns auf die clientseitige Programmierung beschränken, können wir z.B. mit JavaScript dem Anwender aus seiner passiven Haltung heraushelfen. Jawohl liebe Anwender, bewegt eure müden Hände und füllt Informationen in eure armen Webapplikationen hinein! Das Internet ist nunmal zum Mitmachen und nicht ganz so passiv wie das Fernsehprogramm.

Mögliche Stellen an denen mit JavaScript eine Interaktion erstellt werden kann

Hier eine kleine Auswahl an möglichen Stellen:

Im Body Tag
Sehr begehrt ist dass body Tag. Hier kann eine JavaScript Funktion als Attribut eingetragen werden. Beispielsweise kann hier mit dem Attribut onload eine Funktion aufgerufen werden, die nur beim Laden des HTML Dokuments ausgeführt wird. Wenn du also den Anwender unbedingt mit einer Alert Box nerven willst, ist dies eine sehr geeignete Stelle dafür ;)
In einem Input Tag
Bei jeder Eingabe, sei es eine Texteingabe, eine Checkbox, ein Button, eine Selektion oder was weiss ich noch alles, kann eine JavaScript Funktion als Attribut angegeben werden. Ich habe beispielsweise in der letzten Übung bei der Selection Box des Jahres ein paar Attribute eingeführt um diverse Anwenderaktivitäten abzufangen. Wenn in der Selection Box etwas verändert wird, also ein anderer Wert selektiert wird, dann nehme ich diese Information um dass Alter in Tagen zu berechnen.
In jedem Paragraph oder Header Tag
Auch dass geht. Du kannst deinen Webbrowser zu einer Aktion verleiten, wenn der Anwender mit der Maus über einen Text oder eine Überschrift eiert.

Wie du siehst, kannst du an jeder Stelle in deinem Dokument eine JavaScript Funktion ausführen. Es ist vielleicht nicht immer sinnvoll überall eine Funktion aufzurufen. Es kommt immer auf den jeweiligen Anwendungsfall an.

Aufgabe

Füge in eine HTML Datei an verschiedene Elemente ein onmouseover Attribut ein und generiere eine Alert Box die z.B. “Huhu” ausgibt.

Ähnliche Beiträge

www.baldenhofer.eu © seit 2009
Dieser Feed kommt vom Guggat emol Blog, viel Spaß beim Lesen! Über Links zu Artikeln freuen wir uns, jedoch bitte bindet nicht einfach unsere Inhalte in eure Seite ein, danke. Hinweis für Feedleser: Beiträge, die Quellcode enthalten sind auf der Webseite meist besser lesbar, als in einem Feed-Reader.
4e3744397ab2a417f811b29573bcbef4)]]> http://www.baldenhofer.eu/blog/it/programmieren/mit-html-oder-svg-interaktive-ein-ausgaben-erstellen/feed 0 Quanta http://www.baldenhofer.eu/blog/gentoo/quanta http://www.baldenhofer.eu/blog/gentoo/quanta#comments Mon, 02 Feb 2009 23:20:04 +0000 Roland http://www.baldenhofer.eu/blog/?p=73 Dieser Artikel ist Teil 9 von 27 der Artikelserie Asus Softwarepakete

Quanta eignet sich meiner Meinung nach hervorragend zum HTML und CSS Ressourcen zu bearbeiten. Der Editor ist gut aufgeräumt und unterstützt mich mehr sehr gut bei der Erstellung von HTML Dokumenten. Dieser Blogeintrag wurde zum Beispiel mit Quanta geschrieben, da ich die Wordpress Eingabemöglichkeiten als weniger effizient beurteile. Häufig schreibe ich in einem Quanta-Editor drauf los und kopiere das Ergebnis in die Wordpress Eingabeseite hinein.

Der Screenshot hier zeigt zum Beispiel diesen Einleitungstext wie ich ihn mit Quanta erstellt habe. ;)

Ausschnitt einer Quanta Oberfläche auf Asus Eee

Ähnliche Beiträge

www.baldenhofer.eu © seit 2009
Dieser Feed kommt vom Guggat emol Blog, viel Spaß beim Lesen! Über Links zu Artikeln freuen wir uns, jedoch bitte bindet nicht einfach unsere Inhalte in eure Seite ein, danke. Hinweis für Feedleser: Beiträge, die Quellcode enthalten sind auf der Webseite meist besser lesbar, als in einem Feed-Reader.
4e3744397ab2a417f811b29573bcbef4)]]> http://www.baldenhofer.eu/blog/gentoo/quanta/feed 0 Alter berechnen nur mit JavaScript http://www.baldenhofer.eu/blog/it/programmieren/alter-berechnen-nur-mit-javascript http://www.baldenhofer.eu/blog/it/programmieren/alter-berechnen-nur-mit-javascript#comments Sat, 31 Jan 2009 23:57:07 +0000 Roland http://www.baldenhofer.eu/blog/?p=108 Dieser Artikel ist Teil 3 von 26 der Artikelserie 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)

Ähnliche Beiträge

www.baldenhofer.eu © seit 2009
Dieser Feed kommt vom Guggat emol Blog, viel Spaß beim Lesen! Über Links zu Artikeln freuen wir uns, jedoch bitte bindet nicht einfach unsere Inhalte in eure Seite ein, danke. Hinweis für Feedleser: Beiträge, die Quellcode enthalten sind auf der Webseite meist besser lesbar, als in einem Feed-Reader.
4e3744397ab2a417f811b29573bcbef4)]]> http://www.baldenhofer.eu/blog/it/programmieren/alter-berechnen-nur-mit-javascript/feed 3 Variablenzuweisungen und Berechnungen http://www.baldenhofer.eu/blog/it/programmieren/variablenzuweisungen-und-berechnungen http://www.baldenhofer.eu/blog/it/programmieren/variablenzuweisungen-und-berechnungen#comments Thu, 29 Jan 2009 22:24:30 +0000 Roland http://www.baldenhofer.eu/blog/?p=41 Dieser Artikel ist Teil 2 von 26 der Artikelserie Programmieren

Ok, fangen wir mal ganz einfach an.

Wir wollen das Alter eines Menschen in Tagen ausrechnen. Das bedeutet, dass der entsprechende Mensch seinen Geburtstag in drei Eingabefelder eingibt und wir anhand dieser drei eingegebenen Zahlen (Tag, Monat und Jahr) und dem aktuellen Datum ausrechnen können wie alt dieser Mensch ist.
Zumindest soll dass dabei rauskommen.

Variablen werden beim Programmieren dazu verwendet, die einzelnen Eingabewerte aufzunehmen und damit weiter zu rechnen. Also genauso wie bei der Mathematik. Da kann man ja auch eine Formel a = b+c erstellen und für b und c beliebige Werte eingeben.
Ich mach mal einen Versuch in einer HTML Oberfläche drei Eingabevariablen zu definieren.

Eingabefelder für die Variablen day, month und year

Zuerst brauchen wir mal eine Oberfläche, in die wir die drei Zahlen eingeben können. Ich habe schnell mal eine zusammengeschraubt. Das Ergebnis könnt ihr unter Erste Übung Eingabefelder für Tag, Monat und Jahr ansehen.

Was fällt euch auf wenn ihr die Seite anschaut?

Als erstes sollte auffallen, dass ich dem Anwender nur Auswahlboxen zur Verfügung gestellt habe.

Frage an die Kursteilnehmer

Lieber Kursteilnehmer, was für Vorteile hat es dem Anwender eine Auswahlbox zur Verfügung zu stellen?

Wäre es nicht einfacher ein Eingabefeld darzustellen und dann einfach dort die Variablen entgegenzunehmen?

Die Oberfläche ist noch ziemlich langweilig. Ich habe hier nur die drei Eingabemöglichkeiten dargestellt und noch keine Verarbeitung, kein Button der irgendwas macht und kein JavaScript mit dem die Berechnung durchgeführt wird eingebaut. Aber ist die Oberfläche wirklich so langweilig?

Ich habe die Oberfläche dynamisch auf dem Server zusammengebaut. Ihr werdet nächstes Jahr sehen, dass das maximale Jahr immer das Aktuelle ist. Somit kann man auch bei einem Baby die Anzahl der Tage berechnen lassen, auch wenn es noch kein Jahr alt ist.

Das angezeigte Jahr ist immer das vor 25 Jahren aktuelle Jahr. Und der Quelltext ist ordentlich eingerückt.

Hier seht ihr den PHP-Quellcode mit dem ich die Jahresauswahl erstellt habe:

<select name=”day”>
  1. <select name="day">
  2. < ?
  3. for(  $month = 1
  4. ; $month <= 31
  5. ; $month++){
  6. $spaceFiller = "";
  7. if($month > 1){
  8. $spaceFiller = "                      ";
  9. }
  10. echo $spaceFiller
  11. .'<option '
  12. .'value="'
  13. .$month
  14. .'">'
  15. .$month
  16. .'</option>'
  17. ."\n";
  18. }
  19. ?>
  20. </select>
  21. <select name="month">
  22. <option value="1">1</option>
  23. <option value="2">2</option>
  24. <option value="3">3</option>
  25. <option value="4">4</option>
  26. <option value="5">5</option>
  27. <option value="6">6</option>
  28. <option value="7">7</option>
  29. <option value="8">8</option>
  30. <option value="9">9</option>
  31. <option value="10">10</option>
  32. <option value="11">11</option>
  33. <option value="12">12</option>
  34. </select>
  35. <select name="year">
  36. < ?
  37. $currentYear = (int)date("Y");
  38. $startYear = $currentYear-100;
  39. $spaceFiller = "";
  40. for(  $year =  $startYear
  41. ; $year <= $currentYear
  42. ; $year++){
  43. $selected = "";
  44. if($year == $currentYear-25){
  45. $selected="selected=\"selected\" ";
  46. }
  47. echo $spaceFiller
  48. .'<option '
  49. .$selected
  50. .'value="'
  51. .$year
  52. .'">'
  53. .$year
  54. .''
  55. ."\n";
  56. $spaceFiller = "                      ";
  57. }
  58. ?>
  59. </select>

Aufgabe an die Kursteilnehmer

Was fällt euch zu diesem Code ein?

Kann man den Code noch für andere Aufgaben verwenden? Schreibt eure Ideen dazu auf und diskutiert die einzelnen Codeblöcke.

Ähnliche Beiträge

www.baldenhofer.eu © seit 2009
Dieser Feed kommt vom Guggat emol Blog, viel Spaß beim Lesen! Über Links zu Artikeln freuen wir uns, jedoch bitte bindet nicht einfach unsere Inhalte in eure Seite ein, danke. Hinweis für Feedleser: Beiträge, die Quellcode enthalten sind auf der Webseite meist besser lesbar, als in einem Feed-Reader.
4e3744397ab2a417f811b29573bcbef4)]]> http://www.baldenhofer.eu/blog/it/programmieren/variablenzuweisungen-und-berechnungen/feed 4