<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://unfoldingneurons.com/"
	>

<channel>
	<title>Guggat emol Blog &#187; Einbinden der JavaScript Timer Klasse in eine Webseite</title>
	<atom:link href="http://www.baldenhofer.eu/blog/tag/html/feed" rel="self" type="application/rss+xml" />
	<link>http://www.baldenhofer.eu/blog</link>
	<description>Roland bloggt über IT, Programmieren und Linux</description>
	<lastBuildDate>Tue, 25 Oct 2011 22:53:01 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>Einbinden der JavaScript Timer Klasse in eine Webseite</title>
		<link>http://www.baldenhofer.eu/blog/it/programmieren/einbinden-der-javascript-timer-klasse-in-eine-webseite</link>
		<comments>http://www.baldenhofer.eu/blog/it/programmieren/einbinden-der-javascript-timer-klasse-in-eine-webseite#comments</comments>
		<pubDate>Thu, 12 Mar 2009 12:22:50 +0000</pubDate>
		<dc:creator>Roland</dc:creator>
				<category><![CDATA[Programmieren]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[svg]]></category>
		<category><![CDATA[timer]]></category>

		<guid isPermaLink="false">http://www.baldenhofer.eu/blog/?p=632</guid>
		<description><![CDATA[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 &#60;script language=&#8221;JavaScript&#8221; src=&#8221;timer.js&#8221;&#62; &#60;/script&#62; eingebunden werden. [...]]]></description>
			<content:encoded><![CDATA[<p>Ich habe im Artikel <a href="http://www.baldenhofer.eu/blog/it/programmieren/mit-javascript-einen-wiederkehrenden-event-erzeugen">Mit JavaScript einen wiederkehrenden Timer erzeugen</a> eine Klasse beschrieben, mit der wir einen wiederkehrenden Event ausführen können. Diese Klasse möchte ich nun in einem Webauftritt einbinden.<br />
Der Quellcode der Klasse wird in der Datei timer.js abgespeichert. In jedem Webauftritt kann sie nun mit der Zeile <span class="code">&lt;script language=&#8221;JavaScript&#8221; src=&#8221;timer.js&#8221;&gt;<br />
&lt;/script&gt;</span> eingebunden werden.</p>
<h3>Eininden des Webauftritt spezifischen Codes</h3>
<p>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.<br />
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.<br />
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:</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Die folgende Funktion zeigt wie die Timerklasse initialisiert werden muß. </span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> initApp<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> timeObject = <span class="kw2">new</span> Timer<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; timeObject.<span class="me1">setEventTime</span><span class="br0">&#40;</span><span class="nu0">60000</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; timeObject.<span class="me1">setEventFunction</span><span class="br0">&#40;</span><span class="st0">&quot;alarm()&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; timeObject.<span class="me1">processEvent</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; </div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Diese Funktion soll alle 60 Sekunden aufgerufen werden.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> alarm<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;Hi, du bist jetzt schon eine Minute hier. Aufwachen!!!&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Diese Datei binden wir mit <span class="code">&lt;script language=&#8221;JavaScript&#8221; src=&#8221;baldenhofer.js&#8221;&gt;<br />
&lt;/script&gt;</span> ein. Natürlich müssen wir auch die vorher beschriebene timer.js mit einbinden, da wir ja auf Timer zugreifen wollen.<br />
Damit die initApp() Funktion auch gestartet wird, binden wir den Aufruf in unserem body-Tag des HTML Dokuments ein.<br />
<span class="code">&lt;body onload=&#8221;initApp()&#8221;&gt;&#8230;<br />
&lt;/body&gt;</span><br />
Jetzt wird die Applikation beim Laden des HTML Dokuments initialisiert und gestartet. Jede Minute wird unser armer Besucher nun mit einem Alert() genervt.</p>
<hr /><h2>Ähnliche Beiträge</h2><ul></ul><hr /><small>www.baldenhofer.eu © seit 2009 <br />
Dieser Feed kommt vom <a href="http://www.baldenhofer.eu/blog">Guggat emol Blog</a>, viel Spa&#223; beim Lesen! &#220;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. 
<br /> 4e3744397ab2a417f811b29573bcbef4)</small>]]></content:encoded>
			<wfw:commentRss>http://www.baldenhofer.eu/blog/it/programmieren/einbinden-der-javascript-timer-klasse-in-eine-webseite/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<series:name><![CDATA[Programmieren]]></series:name>
	</item>
		<item>
		<title>Mit JavaScript einen wiederkehrenden Event erzeugen</title>
		<link>http://www.baldenhofer.eu/blog/it/programmieren/mit-javascript-einen-wiederkehrenden-event-erzeugen</link>
		<comments>http://www.baldenhofer.eu/blog/it/programmieren/mit-javascript-einen-wiederkehrenden-event-erzeugen#comments</comments>
		<pubDate>Tue, 10 Mar 2009 08:38:43 +0000</pubDate>
		<dc:creator>Roland</dc:creator>
				<category><![CDATA[Programmieren]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[svg]]></category>
		<category><![CDATA[timer]]></category>

		<guid isPermaLink="false">http://www.baldenhofer.eu/blog/?p=628</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p>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.<br />
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.</p>
<h3>Timer Klasse</h3>
<p>Wenn man einen Ball über den Bildschirm fliegen lassen will, dann sollte dieser auch fliegen wenn keine Taste gedrückt wird. Klingt gut gelle?<br />
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.<br />
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.</p>
<h3>Klasse als UML Diagramm</h3>
<p>Hier die Klasse in UML Schreibweise:<br />
<img src="/images/blog/programmieren/timer.png" alt="UML Diagramm der Timer Klasse." /></p>
<h3>Methoden der Klasse</h3>
<p>Die Methoden sind:</p>
<h4>Timer</h4>
<p>Stellt den Konstruktor dar, den wir in unseren Programmen zum Initialisieren der Timerklasse verwenden.</p>
<h4>setEventTime</h4>
<p>Setzt den Zeitintervall nach dem unser wiederkehrender Event aufgerufen werden soll.</p>
<h4>getEventTime</h4>
<p>Liefert den aktuell gespeicherten Zeitintervall zurück.</p>
<h4>setEventFunction</h4>
<p>Setzt den Namen der Funktion, die wir wiederkehrend aufrufen wollen.</p>
<h4>getEventFunction</h4>
<p>Liefert den aktuell eingetragenen Namen der Funktion, die wiederkehrend aufgerufen werden soll, zurück.</p>
<h4>processEvent</h4>
<p>Startet die Verarbeitung. Nach Aufruf dieser Methode wird die EventFunktion wiederkehrend aufgerufen.</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Mit dieser Klasse können Events Zeitgesteuert aufgerufen werden.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Es kann mit setEventTime() die Zeitspanne in ms eingegeben werden. </span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Nach dieser Zeitspanne wird die Funktion, die mit setEvent() gesetzt </span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* wurde, aufgerufen.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> Timer<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">// Angabe in welchen Zeitabständen der Event ausgelöst werden soll.</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">this</span>.<span class="me1">eventTime</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">// Speichert den Namen der Funktion ab, die nach Ablauf </span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">// der Zeitspanne aufgerufen werden soll.</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">this</span>.<span class="me1">eventFunction</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Setzt die Zeitspanne in ms nach der die Eventfunktion aufgerufen</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* werden soll.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* @param eventTime Die Zeitspanne in ms.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1">Timer.<span class="me1">prototype</span>.<span class="me1">setEventTime</span> = <span class="kw2">function</span><span class="br0">&#40;</span>eventTime<span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">this</span>.<span class="me1">eventTime</span> = eventTime;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Liefert die Zeitspanne zurück.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* @return Die gesetzte Zeitspanne in ms.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1">Timer.<span class="me1">prototype</span>.<span class="me1">getEventTime</span> = <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span> <span class="kw1">this</span>.<span class="me1">eventTime</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Setzt den Namen der Funktion, die nach Ablauf der Zeitspanne </span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* wiederkehrend aufgerufen werden soll.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* @param eventFunction Der Name der Eventfunktion.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1">Timer.<span class="me1">prototype</span>.<span class="me1">setEventFunction</span> = <span class="kw2">function</span><span class="br0">&#40;</span>eventFunction<span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp;<span class="kw1">this</span>.<span class="me1">eventFunction</span> = eventFunction;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Liefert den Namen der Eventfunktion zurück.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* @return Der Name der Eventfunktion.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1">Timer.<span class="me1">prototype</span>.<span class="me1">getEventFunction</span> = <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span> <span class="kw1">this</span>.<span class="me1">eventFunction</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Sorgt dafür, dass der Event wiederkehrend ausgeführt wird.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1">Timer.<span class="me1">prototype</span>.<span class="me1">processEvent</span> = <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; window.<span class="me1">setInterval</span><span class="br0">&#40;</span><span class="kw1">this</span>.<span class="me1">eventFunction</span>, <span class="kw1">this</span>.<span class="me1">eventTime</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<p>Diese Klasse kannst du nun nehmen um wiederkehrende Abläufe darzustellen.<br />
Ich habe keine Übergabeüberprüfungen eingebaut. Wenn du also Mist übergibst, funktioniert diese Klasse nicht. Eventuell willst du das noch verbessern&#8230;</p>
<h3>Aufruf der Klasse</h3>
<p>Hier ein kleines Beispielprogramm, mit dem du diese Klasse zum Leben erwecken kannst:</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Die folgende Funktion zeigt wie die Timerklasse initialisiert werden muß. </span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> initApp<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> timeObject = <span class="kw2">new</span> Timer<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; timeObject.<span class="me1">setEventTime</span><span class="br0">&#40;</span><span class="nu0">10000</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; timeObject.<span class="me1">setEventFunction</span><span class="br0">&#40;</span><span class="st0">&quot;alarm()&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; timeObject.<span class="me1">processEvent</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Diese Funktion soll alle 10 Sekunden aufgerufen werden.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> alarm<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">&quot;hi&quot;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<hr /><h2>Ähnliche Beiträge</h2><ul></ul><hr /><small>www.baldenhofer.eu © seit 2009 <br />
Dieser Feed kommt vom <a href="http://www.baldenhofer.eu/blog">Guggat emol Blog</a>, viel Spa&#223; beim Lesen! &#220;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. 
<br /> 4e3744397ab2a417f811b29573bcbef4)</small>]]></content:encoded>
			<wfw:commentRss>http://www.baldenhofer.eu/blog/it/programmieren/mit-javascript-einen-wiederkehrenden-event-erzeugen/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
	
		<series:name><![CDATA[Programmieren]]></series:name>
	</item>
		<item>
		<title>Mit HTML, oder SVG, interaktive Ein- Ausgaben erstellen</title>
		<link>http://www.baldenhofer.eu/blog/it/programmieren/mit-html-oder-svg-interaktive-ein-ausgaben-erstellen</link>
		<comments>http://www.baldenhofer.eu/blog/it/programmieren/mit-html-oder-svg-interaktive-ein-ausgaben-erstellen#comments</comments>
		<pubDate>Sat, 21 Feb 2009 22:19:16 +0000</pubDate>
		<dc:creator>Roland</dc:creator>
				<category><![CDATA[Programmieren]]></category>
		<category><![CDATA[client]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[interaktiv]]></category>
		<category><![CDATA[svg]]></category>

		<guid isPermaLink="false">http://www.baldenhofer.eu/blog/?p=222</guid>
		<description><![CDATA[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. [...]]]></description>
			<content:encoded><![CDATA[<p>Wir beschränken uns in den nächsten Betrachtungen auf HTML, und eventuell noch auf SVG, um mit dem Anwender in Kontakt zu treten.<br />
In HTML haben wir diverse Möglichkeiten vom Anwender Informationen entgegenzunehmen. Unter anderem sind dies:</p>
<ul>
<li>Input Elemente</li>
<li>Select Elemente</li>
<li>Listenauswahlen</li>
<li>Checkboxen</li>
<li>Submit Buttons</li>
</ul>
<p>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.</p>
<h3>Mögliche Stellen an denen mit JavaScript eine Interaktion erstellt werden kann</h3>
<p>Hier eine kleine Auswahl an möglichen Stellen:</p>
<dl>
<dt>Im Body Tag</dt>
<dd>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 <img src='http://www.baldenhofer.eu/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  </dd>
<dt>In einem Input Tag</dt>
<dd>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.</dd>
<dt>In jedem Paragraph oder Header Tag</dt>
<dd>Auch dass geht. Du kannst deinen Webbrowser zu einer Aktion verleiten, wenn der Anwender mit der Maus über einen Text oder eine Überschrift eiert. </dd>
</dl>
<p>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.</p>
<h4>Aufgabe</h4>
<p>Füge in eine HTML Datei an verschiedene Elemente ein onmouseover Attribut ein und generiere eine Alert Box die z.B. &#8220;Huhu&#8221; ausgibt.</p>
<hr /><h2>Ähnliche Beiträge</h2><ul></ul><hr /><small>www.baldenhofer.eu © seit 2009 <br />
Dieser Feed kommt vom <a href="http://www.baldenhofer.eu/blog">Guggat emol Blog</a>, viel Spa&#223; beim Lesen! &#220;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. 
<br /> 4e3744397ab2a417f811b29573bcbef4)</small>]]></content:encoded>
			<wfw:commentRss>http://www.baldenhofer.eu/blog/it/programmieren/mit-html-oder-svg-interaktive-ein-ausgaben-erstellen/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<series:name><![CDATA[Programmieren]]></series:name>
	</item>
		<item>
		<title>Quanta</title>
		<link>http://www.baldenhofer.eu/blog/gentoo/quanta</link>
		<comments>http://www.baldenhofer.eu/blog/gentoo/quanta#comments</comments>
		<pubDate>Mon, 02 Feb 2009 23:20:04 +0000</pubDate>
		<dc:creator>Roland</dc:creator>
				<category><![CDATA[Asus]]></category>
		<category><![CDATA[gentoo]]></category>
		<category><![CDATA[Software]]></category>
		<category><![CDATA[Asus Eee]]></category>
		<category><![CDATA[Editor]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Quanta]]></category>

		<guid isPermaLink="false">http://www.baldenhofer.eu/blog/?p=73</guid>
		<description><![CDATA[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 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://de.wikipedia.org/wiki/Quanta_Plus">Quanta</a> eignet sich meiner Meinung nach hervorragend zum <a href="http://de.wikipedia.org/wiki/Hypertext_Markup_Language">HTML</a> und <a href="http://de.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a> 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.</p>
<p>Der Screenshot hier zeigt zum Beispiel diesen Einleitungstext wie ich ihn mit Quanta erstellt habe. <img src='http://www.baldenhofer.eu/blog/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p><img src="/images/blog/quanta_view.jpeg" alt="Ausschnitt einer Quanta Oberfläche auf Asus Eee" /></p>
<hr /><h2>Ähnliche Beiträge</h2><ul></ul><hr /><small>www.baldenhofer.eu © seit 2009 <br />
Dieser Feed kommt vom <a href="http://www.baldenhofer.eu/blog">Guggat emol Blog</a>, viel Spa&#223; beim Lesen! &#220;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. 
<br /> 4e3744397ab2a417f811b29573bcbef4)</small>]]></content:encoded>
			<wfw:commentRss>http://www.baldenhofer.eu/blog/gentoo/quanta/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<series:name><![CDATA[Asus Softwarepakete]]></series:name>
	</item>
		<item>
		<title>Alter berechnen nur mit JavaScript</title>
		<link>http://www.baldenhofer.eu/blog/it/programmieren/alter-berechnen-nur-mit-javascript</link>
		<comments>http://www.baldenhofer.eu/blog/it/programmieren/alter-berechnen-nur-mit-javascript#comments</comments>
		<pubDate>Sat, 31 Jan 2009 23:57:07 +0000</pubDate>
		<dc:creator>Roland</dc:creator>
				<category><![CDATA[Programmieren]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[JavaScript]]></category>

		<guid isPermaLink="false">http://www.baldenhofer.eu/blog/?p=108</guid>
		<description><![CDATA[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=&#8221;day&#8221;, id=&#8221;month&#8221; und id=&#8221;year&#8221; im HTML Code gekennzeichnet) können uns die notwendigen Werte liefern. Im Variablen Übung Teil 2 seht ihr die modifizierte Eingabeoberfläche. [...]]]></description>
			<content:encoded><![CDATA[<p>In <a href="http://www.baldenhofer.eu/blog/it/programmieren/variablenzuweisungen-und-berechnungen">Variablenzuweisungen und Berechnungen</a> haben wir die Eingabefelder für das Geburtsdatum erstellt. Jetzt wollen wir eine Berechnung für das Alter in Tagen erstellen.</p>
<h3>Modifikationen an der bestehenden Oberfläche</h3>
<p>Die Eingabefelder (mit id=&#8221;day&#8221;, id=&#8221;month&#8221; und id=&#8221;year&#8221; im HTML Code gekennzeichnet) können uns die notwendigen Werte liefern. Im <a href="/programmieren/variablen_uebung_2.php">Variablen Übung Teil 2</a> seht ihr die modifizierte Eingabeoberfläche. Ich habe einen Paragraph mit der id=&#8221;dynamic_message&#8221; eingefügt. In diesem Paragraph werden wir dass Alter oder eventuell auftretende Fehlermeldungen ausgeben. Bei der Jahreseingabe habe ich noch ein onblur=&#8221;calculateAgeInDays()&#8221; Attribut und ein  onchange=&#8221;calculateAgeInDays()&#8221; 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 &#8220;variablen_uebung_2.js&#8221; eingefügt. Und im Head der HTML Datei sorge ich mit <span class="code">&lt;script type=&#8221;text/javascript&#8221; src=&#8221;variablen_uebung_2.js&#8221;&gt;&lt;/script&gt; </span> dafür, dass die JavaScript Datei geladen wird.</p>
<h3>Die Javascript Datei</h3>
<p>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.</p>
<p>Hier der JavaScript Code:</p>
<div class="geshi no javascript">
<ol>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Berechnet das Alter eines Menschen in Tagen.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Diese Funktion ließt die Variablen day, month und year aus der Oberfläche</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* aus.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> calculateAgeInDays<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> birthDay = parseInt<span class="br0">&#40;</span>document.<span class="me1">getElementById</span><span class="br0">&#40;</span><span class="st0">&quot;day&quot;</span><span class="br0">&#41;</span>.<span class="me1">value</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> birthMonth = parseInt<span class="br0">&#40;</span>document.<span class="me1">getElementById</span><span class="br0">&#40;</span><span class="st0">&quot;month&quot;</span><span class="br0">&#41;</span>.<span class="me1">value</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> birthYear = parseInt<span class="br0">&#40;</span>document.<span class="me1">getElementById</span><span class="br0">&#40;</span><span class="st0">&quot;year&quot;</span><span class="br0">&#41;</span>.<span class="me1">value</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span><span class="br0">&#40;</span>checkDate<span class="br0">&#40;</span>birthYear, birthMonth, birthDay<span class="br0">&#41;</span> == <span class="kw2">false</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; document.<span class="me1">getElementById</span><span class="br0">&#40;</span><span class="st0">&quot;dynamic_message&quot;</span><span class="br0">&#41;</span>.<span class="me1">innerHTML</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; = <span class="st0">&quot;Dieses Datum (&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; +birthDay</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; +<span class="st0">&quot;.&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; +birthMonth</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; +<span class="st0">&quot;.&quot;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; +birthYear</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; +<span class="st0">&quot;) gibt es nicht&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">return</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">// Das Datum scheint korrekt zu sein.</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">// Subtrahiere vom aktuellen Datum das übergebene Datum.</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> currentDate = <span class="kw2">new</span> Date<span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> birthDate = <span class="kw2">new</span> Date<span class="br0">&#40;</span>birthYear, birthMonth<span class="nu0">-1</span>, birthDay<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> delta = currentDate.<span class="me1">getTime</span><span class="br0">&#40;</span><span class="br0">&#41;</span> &#8211; birthDate.<span class="me1">getTime</span><span class="br0">&#40;</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">// Ein Tag ist 1000*60*60*24 Millisekunden.</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> ageInDays = delta <span class="sy0">/</span> <span class="br0">&#40;</span><span class="nu0">1000</span><span class="sy0">*</span><span class="nu0">60</span><span class="sy0">*</span><span class="nu0">60</span><span class="sy0">*</span><span class="nu0">24</span><span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">// Beim Runden wird der aktuelle Tag hinzugefügt. Also einen Tag weniger.</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> ageInDays = Math.<span class="me1">round</span><span class="br0">&#40;</span>ageInDays<span class="br0">&#41;</span><span class="nu0">-1</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; document.<span class="me1">getElementById</span><span class="br0">&#40;</span><span class="st0">&quot;dynamic_message&quot;</span><span class="br0">&#41;</span>.<span class="me1">innerHTML</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; = <span class="st0">&quot;Du bist &quot;</span>+ageInDays+<span class="st0">&quot; Tage alt&quot;</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp;</div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">/**</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* Kontrolliert, ob mit den übergebenen Variablen day, month, year ein</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* vernünftiges Datum dargestellt werden kann. Beispielsweise kann Februar</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* keine 31 Tage haben.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* @param year Der Integer Wert des Jahres.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* @param day Der Integer Wert des Tages.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* @param month Der Integer Wert des Monats.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;* @return true Die Zahlen stellen ein korrektes Datum dar, ansonsten false.</span></div>
</li>
<li class="li1">
<div class="de1"><span class="coMULTI">&nbsp;*/</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">function</span> checkDate<span class="br0">&#40;</span>year, month, day<span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">// Beim Date Objekt werden Monate von 0 bis 11 gezählt.</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; month = month<span class="nu0">-1</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">// Date generiert ein Datum auch mit falschen Zahlenwerten. </span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="co1">// So wird z.B. 2009, 11, 31 ein Datum 2009, 12, 1 erzeugen.</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw2">var</span> checkDate = <span class="kw2">new</span> Date<span class="br0">&#40;</span>year, month, day<span class="br0">&#41;</span>;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">if</span><span class="br0">&#40;</span> &nbsp; <span class="br0">&#40;</span>checkDate.<span class="me1">getDate</span><span class="br0">&#40;</span><span class="br0">&#41;</span> == day<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp;<span class="sy0">&amp;&amp;</span> <span class="br0">&#40;</span>checkDate.<span class="me1">getMonth</span><span class="br0">&#40;</span><span class="br0">&#41;</span> == month<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp;<span class="sy0">&amp;&amp;</span> <span class="br0">&#40;</span>checkDate.<span class="me1">getFullYear</span><span class="br0">&#40;</span><span class="br0">&#41;</span> == year<span class="br0">&#41;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; <span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; &nbsp; &nbsp; <span class="kw1">return</span> <span class="kw2">true</span>; &nbsp;</div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1">&nbsp; &nbsp; <span class="kw1">return</span> <span class="kw2">false</span>;</div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
</ol>
</div>
<h4>Frage an die Kursteilnehmer</h4>
<p>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:</p>
<ul>
<li> Was passiert, wenn kein JavaScript im Browser aktiviert ist?</li>
</ul>
<ul>
<li> Wie können wir dass umbauen, wenn kein JavaScript vorhanden ist?</li>
</ul>
<ul>
<li> 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)</li>
</ul>
<hr /><h2>Ähnliche Beiträge</h2><ul></ul><hr /><small>www.baldenhofer.eu © seit 2009 <br />
Dieser Feed kommt vom <a href="http://www.baldenhofer.eu/blog">Guggat emol Blog</a>, viel Spa&#223; beim Lesen! &#220;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. 
<br /> 4e3744397ab2a417f811b29573bcbef4)</small>]]></content:encoded>
			<wfw:commentRss>http://www.baldenhofer.eu/blog/it/programmieren/alter-berechnen-nur-mit-javascript/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
	
		<series:name><![CDATA[Programmieren]]></series:name>
	</item>
		<item>
		<title>Variablenzuweisungen und Berechnungen</title>
		<link>http://www.baldenhofer.eu/blog/it/programmieren/variablenzuweisungen-und-berechnungen</link>
		<comments>http://www.baldenhofer.eu/blog/it/programmieren/variablenzuweisungen-und-berechnungen#comments</comments>
		<pubDate>Thu, 29 Jan 2009 22:24:30 +0000</pubDate>
		<dc:creator>Roland</dc:creator>
				<category><![CDATA[Programmieren]]></category>
		<category><![CDATA[Code]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[Variablen]]></category>

		<guid isPermaLink="false">http://www.baldenhofer.eu/blog/?p=41</guid>
		<description><![CDATA[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. [...]]]></description>
			<content:encoded><![CDATA[<p>Ok, fangen wir mal ganz einfach an.</p>
<p>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.<br />
Zumindest soll dass dabei rauskommen.</p>
<p><a href="http://de.wikipedia.org/wiki/Variable_(Programmierung)">Variablen</a> 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.<br />
Ich mach mal einen Versuch in einer HTML Oberfläche drei Eingabevariablen zu definieren.</p>
<h2>Eingabefelder für die Variablen day, month und year</h2>
<p>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 <a href="/programmieren/variablen_uebung_1.php">Erste Übung Eingabefelder für Tag, Monat und Jahr</a> ansehen.</p>
<p>Was fällt euch auf wenn ihr die Seite anschaut?</p>
<p>Als erstes sollte auffallen, dass ich dem Anwender nur Auswahlboxen zur Verfügung gestellt habe.</p>
<h3>Frage an die Kursteilnehmer</h3>
<p>Lieber Kursteilnehmer, was für Vorteile hat es dem Anwender eine Auswahlbox zur Verfügung zu stellen?</p>
<p>Wäre es nicht einfacher ein Eingabefeld darzustellen und dann einfach dort die Variablen entgegenzunehmen?</p>
<p>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?</p>
<p>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.</p>
<p>Das angezeigte Jahr ist immer das vor 25 Jahren aktuelle Jahr. Und der Quelltext ist ordentlich eingerückt.</p>
<p>Hier seht ihr den PHP-Quellcode mit dem ich die Jahresauswahl erstellt habe:</p>
<div class="geshi no php">
<div class="head">&lt;select name=&#8221;day&#8221;&gt;</div>
<ol>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>select name<span class="sy0">=</span><span class="st0">&quot;day&quot;</span><span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span> ?</div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">for</span><span class="br0">&#40;</span> &nbsp;<span class="re1">$month</span> <span class="sy0">=</span> <span class="nu0">1</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">;</span> <span class="re1">$month</span> <span class="sy0">&lt;=</span> <span class="nu0">31</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">;</span> <span class="re1">$month</span><span class="sy0">++</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re1">$spaceFiller</span> <span class="sy0">=</span> <span class="st0">&quot;&quot;</span><span class="sy0">;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">if</span><span class="br0">&#40;</span><span class="re1">$month</span> <span class="sy0">&gt;</span> <span class="nu0">1</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re1">$spaceFiller</span> <span class="sy0">=</span> <span class="st0">&quot; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&quot;</span><span class="sy0">;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw3">echo</span> <span class="re1">$spaceFiller</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="st0">&#39;&lt;option &#39;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="st0">&#39;value=&quot;&#39;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="re1">$month</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="st0">&#39;&quot;&gt;&#39;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="re1">$month</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="st0">&#39;&lt;/option&gt;&#39;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="st0">&quot;<span class="es0">\n</span>&quot;</span><span class="sy0">;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">?&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;/</span>select<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>select name<span class="sy0">=</span><span class="st0">&quot;month&quot;</span><span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;1&quot;</span><span class="sy0">&gt;</span><span class="nu0">1</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;2&quot;</span><span class="sy0">&gt;</span><span class="nu0">2</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;3&quot;</span><span class="sy0">&gt;</span><span class="nu0">3</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;4&quot;</span><span class="sy0">&gt;</span><span class="nu0">4</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;5&quot;</span><span class="sy0">&gt;</span><span class="nu0">5</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;6&quot;</span><span class="sy0">&gt;</span><span class="nu0">6</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;7&quot;</span><span class="sy0">&gt;</span><span class="nu0">7</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;8&quot;</span><span class="sy0">&gt;</span><span class="nu0">8</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;9&quot;</span><span class="sy0">&gt;</span><span class="nu0">9</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;10&quot;</span><span class="sy0">&gt;</span><span class="nu0">10</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;11&quot;</span><span class="sy0">&gt;</span><span class="nu0">11</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>option value<span class="sy0">=</span><span class="st0">&quot;12&quot;</span><span class="sy0">&gt;</span><span class="nu0">12</span><span class="sy0">&lt;/</span>option<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;/</span>select<span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span>select name<span class="sy0">=</span><span class="st0">&quot;year&quot;</span><span class="sy0">&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;</span> ?</div>
</li>
<li class="li1">
<div class="de1"><span class="re1">$currentYear</span> <span class="sy0">=</span> <span class="br0">&#40;</span>int<span class="br0">&#41;</span><span class="kw3">date</span><span class="br0">&#40;</span><span class="st0">&quot;Y&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re1">$startYear</span> <span class="sy0">=</span> <span class="re1">$currentYear</span><span class="nu0">-100</span><span class="sy0">;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re1">$spaceFiller</span> <span class="sy0">=</span> <span class="st0">&quot;&quot;</span><span class="sy0">;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">for</span><span class="br0">&#40;</span> &nbsp;<span class="re1">$year</span> <span class="sy0">=</span> &nbsp;<span class="re1">$startYear</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">;</span> <span class="re1">$year</span> <span class="sy0">&lt;=</span> <span class="re1">$currentYear</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">;</span> <span class="re1">$year</span><span class="sy0">++</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re1">$selected</span> <span class="sy0">=</span> <span class="st0">&quot;&quot;</span><span class="sy0">;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw1">if</span><span class="br0">&#40;</span><span class="re1">$year</span> <span class="sy0">==</span> <span class="re1">$currentYear</span><span class="nu0">-25</span><span class="br0">&#41;</span><span class="br0">&#123;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re1">$selected</span><span class="sy0">=</span><span class="st0">&quot;selected=<span class="es0">\&quot;</span>selected<span class="es0">\&quot;</span> &quot;</span><span class="sy0">;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw3">echo</span> <span class="re1">$spaceFiller</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="st0">&#39;&lt;option &#39;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="re1">$selected</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="st0">&#39;value=&quot;&#39;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="re1">$year</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="st0">&#39;&quot;&gt;&#39;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="re1">$year</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="st0">&#39;&#39;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">.</span><span class="st0">&quot;<span class="es0">\n</span>&quot;</span><span class="sy0">;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="re1">$spaceFiller</span> <span class="sy0">=</span> <span class="st0">&quot; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&quot;</span><span class="sy0">;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="br0">&#125;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="kw2">?&gt;</span></div>
</li>
<li class="li1">
<div class="de1"><span class="sy0">&lt;/</span>select<span class="sy0">&gt;</span></div>
</li>
</ol>
</div>
<h3>Aufgabe an die Kursteilnehmer</h3>
<p>Was fällt euch zu diesem Code ein?</p>
<p>Kann man den Code noch für andere Aufgaben verwenden? Schreibt eure Ideen dazu auf und diskutiert die einzelnen Codeblöcke.</p>
<hr /><h2>Ähnliche Beiträge</h2><ul></ul><hr /><small>www.baldenhofer.eu © seit 2009 <br />
Dieser Feed kommt vom <a href="http://www.baldenhofer.eu/blog">Guggat emol Blog</a>, viel Spa&#223; beim Lesen! &#220;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. 
<br /> 4e3744397ab2a417f811b29573bcbef4)</small>]]></content:encoded>
			<wfw:commentRss>http://www.baldenhofer.eu/blog/it/programmieren/variablenzuweisungen-und-berechnungen/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
	
		<series:name><![CDATA[Programmieren]]></series:name>
	</item>
	</channel>
</rss>

