Ähnliche Beiträge

• JavaScript – Grundlagen
• JavaScript Grundlagen
• PHP – Einzelcoaching
• Einzelcoaching – Cinema 4D
• HTML & CSS – Grundlagen

Auch hier hatte der Teilnehmer nur wenige Vorkenntnisse in allg. Programmierung, dafür aber um so mehr in HTML und CSS. So konnten wir selbst in den 2 “kurzen” Tagen doch recht viel schaffen.

Ähnliche Beiträge

• JavaScript – Grundlagen
• JavaScript – Grundlagen
• PHP – Grundlagen
• JavaScript Grundlagen
• PHP – Einzelcoaching

Hier ein kleines Beispiel aus dem Kurs. Es ist eine kleine Bestellseite, welches die Berechnung der Preise und das per DOM-Scripting erzeugte Formular übernimmt. Und hier gibt es den Download.

Ähnliche Beiträge

• JavaScript – Grundlagen
• JavaScript – Grundlagen
• PHP – Nachschulung
• PHP – Grundlagen
• JavaScript Grundlagen

weiter zur Demo bzw. zum Download

Ähnliche Beiträge

• JavaScript – Grundlagen
• HTML & CSS – Grundlagen
• JavaScript – Grundlagen
• JavaScript – Grundlagen
• HTML5 – Buch

HTML5. Webseiten innovativ und zukunftssicher

Ähnliche Beiträge

• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1
• Webdesign–Aufbau
• Webdesign–Einzelcoaching
• Webprogrammierung mit HTML und CSS

Ähnliche Beiträge

• JavaScript – Grundlagen
• Flash – Grundlagen und Aufbau
• JavaScript Grundlagen
• HTML Aufbau
• Flash-Aufbau

Ähnliche Beiträge

• JavaScript – Grundlagen
• JavaScript – Grundlagen
• Flash – Grundlagen und Aufbau
• Flash Grundlagen
• JavaScript Aufbau

So haben wir uns dann auf die Schulung von JavaScript konzentriert. Thema war dann speziell das DOM-Scripting, sowie die Verarbeitung von XML-Daten und JSON.

Um die einzelnen Themen in einem kleinen Projekt besser verständlich zu machen, haben wir ein kleines Adressbuch programmiert.

Ähnliche Beiträge

• Einzelcoaching – PHP-XML Schulung
• JavaScript – Grundlagen
• JavaScript – Grundlagen
• PHP – Grundlagen
• JavaScript – Grundlagen

Ein Kompliment an dieser Stelle von mir. Die Animation wird sehr schnell geladen, läuft flüssig ab und reagiert sogar leicht auf die Mausbewegungen. So wird bestimmt irgendwann einmal Flash komplett durch offene Standards ersetzt. Nicht das ich Flash nicht mag, aber hier findet man ein gutes Beispiel wie es Pluginfrei funktioniert.

Ähnliche Beiträge

• 12 Animationen für Flash CS4
• JavaScript – Grundlagen
• JavaScript – Grundlagen
• JavaScript – Grundlagen
• Offline Adressbuch

Ok, als erstes wieder einmal die Zusammenfassung aller Eigenschaften und Methoden der RED-Ajax-Objektes.

1. // JavaScript Document
2. var RED_Ajax =
3. {
4. req : null,
5. url : null,
6. method : 'GET',
7. async : false,
8. body : null,
9. headers : [],
10. timer : null,
11. responseXML : null,
12. responseText : null,
13. init : function() { },
14. run : function() { },
15. header : function() {},

16. response : function() {},

17. callback : function() {},
18. update : function() {},
19. error : function() { }
20. }

Ich werde jetzt nicht alle Eigenschaften im Detail erklären, denn das passiert auf jeden Fall noch bei der Erklärung der einzelnen Methoden. Ich fange lieber direkt mit den Methoden an.

1. init : function()
2. {
3. this.req = (window.XMLHttpRequest)
4. ?
5. new XMLHttpRequest()
6. :
7. ((window.ActiveXObject)
8. ?
9. new ActiveXObject('Microsoft.XMLHTTP')
10. :
11. null
12. );
14. if(this.req != null)
15. {
16. this.req.onreadystatechange = this.response;
17. }
18. },

Wie immer gibt es bei mir eine init()-Methode. Diese hier legt in der reg-Eigenschaft ein Objekt ab, welche eine Verbindung zum Server aufbauen kann. Da jeder Browser ein anderes Objekt dazu benutzt, muss hier immer erst noch geprüft werden ob das ganze auch funktioniert. Wenn alles geklappt hat wird noch auf den readystatechange-Event ein Methodenverweise gemacht.

1. run : function(u,m,f,b)
2. {
3. this.method = m || this.method;
4. this.async = f || this.async;
5. this.body = b || this.body;
6. this.url = u;
7. if(this.req != null)
8. {
9. this.req.open(this.method, this.url, this.async);
10. if(this.headers.length > 0)
11. {
12. for(var i=0; i<this.headers.length; i+=2)
13. {
14. this.req.setRequestHeader(this.headers[i], this.headers[i+1]);
15. }
16. }
17. this.req.send(this.body);
18. }
19. },

Um dann aber auch die eigentlichen Daten vom bzw. zum Server zu schicken gibt es die run()-Methode. Ihr kann bis zu 4 Parameter mit übergeben werden, wobei der erste, die URL-Angabe, nur Pflicht ist. Die weiteren Parameter sind die Übertragungsmethode (GET oder POST), ob die Ubertragung synchron (true) oder asynchron (false) stattfinden soll und der beim Senden mitgelieferte Body.

Bevor der Request aber geschickt wird, werden die im Vorfeld gesetzte Header-Angaben verarbeitet.

1. header : function(k,v)
2. {
3. if(k != null)
4. {
5. this.headers.push(k);
6. this.headers.push(v);
7. }
8. },

Um eine Header-Angabe, die später mit übertragen werden soll, zu setzten, reicht es die header()-Methode mit ihren beiden Parametern key und value aufzurufen.

1. response : function()
2. {
3. var a = ajax.req;
4. switch(a.readyState)
5. {
6. case 1:
7. break;
8. case 2:
9. this.timer = window.setTimeout(this.error, 10000);
10. break;
11. case 3:
12. this.timer = window.setTimeout(this.error, 10000);
13. break;
14. case 4:
15. window.clearTimeout(this.timer);
16. if(a.status==200 || a.statusText=='OK')
17. {
18. RED_Ajax.responseXML = a.responseXML;
19. RED_Ajax.responseText = a.responseText;
20. RED_Ajax.callback();
21. }
22. }
23. },

Beim Ausführen der Sende- bzw. Empfang-Vorganges durchläuft das Verbindungsobjekt verschiedene Stadien, die in der response()-Methode geprüft werden. Folgende Stati gibt es:

1. Das Verbindungsobjekt existiert aber die open()-Methode wurde noch nicht aufgerufen.
2. Die send()-Methode wurde noch nicht ausgeführt.
3. Die send()-Methode wurde zwar ausgeführt, aber der Server hat noch nichts zurück geschickt.
4. Der Server hat angefangen Daten zu übermitteln, aber ist damit noch nicht fertig.
5. Der Übermittlungsvorgang wurde beendet und alle Date sind angekommen.

Um den Übertragungsvorgang auch irgendwann abzubrechen, falls ein Fehler aufgetreten ist, habe ich im Status 2 und 3 eine Timeout eingefügt und hebe ihn im Status 4 wieder auf, da da ja alles angekommen ist. Wenn dann auch noch der Server mit “alles ok” übertragen hat, dann werden die übertragenen Werte einmal als reine Text und als XML-Objekt abgespeichert. Zum Schluss rufe ich nur noch die callback()-Methode auf.

1. callback : function(){},
2. update : function(){},

Meine callback()-Methode ist ein sogenannter Huck und muss erst noch definiert werden. Ich habe deshalb offen gelassen, weil die Verarbeitung der übertragenen Daten sehr unterschiedlich sein kann. In Teil 2 habe ich erklärt wo und wie man diese Definition einsetzt.

Auch habe ich eine update()-Methode zwar eingesetzt, aber noch nicht definiert. Hier lasse ich mir die Möglichkeit offen zu einem späteren Zeitpunkt einen zyklischen Aufruf des Server zu bauen.

1. error : function()
2. {
3. alert('Die Zeit ist um!');
4. this.req.abort();
5. }

Meine letzte Methode ist die error()-Methode. Sie dient ausschließlich dazu bei zu langen Ladezeiten diesen Vorgang abzugrechen.

Wie immer gibt es zum Schluss den Download der beschriebenen Dateien:

• RED_AJAX Datei

Ähnliche Beiträge

• AJAX Adressbuch – Tutorial Teil 2
• AJAX Adressbuch – Tutorial Teil 1
• AJAX Adressbuch – Tutorial Teil 4
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1

Die Programmierung besteht hier nun aus 2 JavaScript-Dateien. Die eine ist für die Verarbeitung der Daten und die andere regelt die Übertragung zum und vom Server.

Fangen wir nun mir der Verarbeitung an. Um in diesem Stadium der Programmierung nicht schon die serverseitigen Scripte geschrieben zu haben, arbeite ich immer mit einer Demo-XML-Datei.

1. // JavaScript Document
2. var RED_Adrbook =
3. {
4. data : [],
5. alerts : { },
6. zeiger : 0,
7. init : function(){ },
8. loadXML : function() { },
9. loadData : function(xml) { },
10. loadEvents : function() { },
11. loadSlides : function() { },
12. pager : function() { },
13. add : function() { },
14. insert : function() { },
15. edit : function() {},
16. update : function() {},
17. remove : function() {}
18. }

Wie schon bei den letzten Beispielen verwende ich bei solcher Programmierung gerne Literale. Die Eingenschaft data dient dann später dazu alle vom Server bekommen Kontakte in einen einzigen Array zu sammeln. Über die Eigenschaft zeiger wird dann das Weiterschalten zum nächsten Mitarbeiter geregelt. Die letzte Eigenschaft innerhalb des Objektes verwende ich um Meldungen vom System an den Benutzer zu kapseln. Ich habe mir dazu ein Unterobjekt angelegt.

Kommen wir nun zu den einzelnen Methoden des Obejktes:

1. init : function()
2. {
3. RED_Ajax.init();
4. this.loadXML();
5. },

In fast jedem Objekt lege ich eine init()-Methode an, um alle wichtigen Prozesse zu starten, die vor der eigentlichen Benutzung durch den Anwender gebraucht werden. In diesem Fall ist das die Vorbereitung der Verbindung zum Server und dann das Laden der XML-Daten vom Server.

1. loadXML : function()
2. {
3. RED_Ajax.callback = function()
4. {
5. RED_Adrbook.loadData(this.responseXML);
6. };
7. RED_Ajax.run('mitarbeiter.xml','GET',false);
8. },

Um die empfangen XML-Daten auch später zu verarbeiten, muss der Huck, also die callback()-Methode des RED_AJAX-Objektes definiert werden. Ich rufe hier die loadData()-Methode des RED_AdrBook auf und übergebe ihr die empfangenen XML-Werte. Nach allen Vorbereitungen rufe ich die run()-Methode auf und übergebe ihr als erstes die zu ladende Datei, dann mit welcher Methode die Übertragung stattfinden soll und zum Schluss ob es sich um eine synchrone Übertragung handelt. Nur selten ändern sich die beiden letzten Werte.

1. loadData : function(xml)
2. {
3. this.data = [];
4. var personen = xml.getElementsByTagName('person');
5. for(var i=0; i<personen.length; i++)
6. {
7. var person = {
8. Nachname : personen[i].childNodes[0].firstChild.nodeValue,
9. Vorname : personen[i].childNodes[1].firstChild.nodeValue,
10. Email : personen[i].childNodes[2].firstChild.nodeValue,
11. Telefon : personen[i].childNodes[3].firstChild.nodeValue,
12. ID : personen[i].getAttribute('id')
13. };
14. this.data.push(person);
15. }
16. this.loadEvents();
17. this.loadSlides();
18. },

Nachdem alle Daten vom Server übertragen wurden, kann die eigentliche Verarbeitung beginnen. Als erstes leere ich den Array und hole mir aus den übergebenen Wert einen Array mit allen Mitarbeitern. Diesen Array durchlaufe ich und erzeuge mir ein eigenes Personen-Objekt zur späteren besseren Verarbeitung. Dieses Personen-Objekt wird dann im Data-Array abgespeichert.

Zum Schluss müssen natürlich noch die Events für die Buttons festgelegt werden und das aktuelle Slide, also der aktuelle, hier der erste, Mitarbeiter angezeigt werden.

1. loadEvents : function()
2. {
3. document.getElementById('btn_next').onclick = function() {
4. RED_Adrbook.pager(true);
5. }
6. document.getElementById('btn_prev').onclick = function() {
7. RED_Adrbook.pager(false);
8. }
9. document.getElementById('btn_edit').onclick = function() {
10. RED_Adrbook.edit();
11. }
12. document.getElementById('btn_add').onclick = function() {
13. RED_Adrbook.add();
14. }
15. document.getElementById('btn_remove').onclick = function() {
16. RED_Adrbook.remove();
17. }
18. },

Das festlegen welche Funktionen welcher Button hat ist recht einfach, da es dafür separate Methoden gibt.

1. loadSlides : function()
2. {
3. var s = document.getElementById('RED_Book').getElementsByTagName('span');
4. s[0].innerHTML = this.zeiger;
5. s[1].innerHTML = this.data[this.zeiger]['Nachname'];
6. s[2].innerHTML = this.data[this.zeiger]['Vorname'];
7. s[4].innerHTML = this.data[this.zeiger]['Telefon'];
8. var link = '<a href="mailto:';
9. link += this.data[this.zeiger]['Email'];
10. link += '">';
11. link += this.data[this.zeiger]['Email'];

12. link += '</a>';
13. s[3].innerHTML = link;
14. },

Bei Laden des aktuelle Slides werden als erstes alle <span>-Tags aus dem Formular mit der ID RED_Book in eine Array geladen. Dann werden die Daten aus dem aktuellen Silde per innerHTML in die Spans zugewiesen. Das this.zeiger immer den aktuellen Zeiger repräsentiert ist das ganze kein größeres Problem. Selbst eine mailto:-Link zu erzeugen stellt keine große Hürde da.

1. pager : function(d)
2. {
3. if(d)
4. {
5. (this.zeiger == this.data.length-1) ?alert(this.alerts.last) :this.zeiger++;
6. }
7. else
8. {
9. (this.zeiger == 0) ?alert(this.alerts.first) :this.zeiger--;
10. }
11. this.loadSlides();
12. },

Für der vor und zurück Blättern gibt es eine kleine und einfache Methode, die als erstes prüft wo der Zeiger steht und am Ende bzw. am Anfang der Liste diesen korrigiert. Dann wird noch per loadSlides()-Methode der richtige Mitarbeiter angezeigt.

1. add : function()
2. {
3. var s = document.getElementById('RED_Book').getElementsByTagName('span');
4. s[0].innerHTML = 'neuer Datensatz';
5. s[0].innerHTML += '<input type="hidden" name="f0" value="" />';
6. s[1].innerHTML = '<input type="text" name="f1" />';
7. s[2].innerHTML = '<input type="text" name="f2" />';
8. s[3].innerHTML = '<input type="text" name="f3" />';
9. s[4].innerHTML = '<input type="text" name="f4" />';
10. s[4].innerHTML += '<br />';s[4].innerHTML += '<input type="button" id="btn_save" value="speichern" />';
11. s[4].innerHTML += '<input type="button" id="btn_cancel" value="abbrechen" />';
12. document.getElementById('btn_save').onclick = function() {
13. RED_Adrbook.insert(document.getElementById('RED_Book'));
14. };
15. document.getElementById('btn_cancel').onclick = function() {
16. RED_Adrbook.loadSlides();
17. };
18. document.getElementsByTagName('input')[1].focus();
19. },

In der add()-Methode werden die Inhalte der <span>-Tags gelöscht und durch leere Eingabefelder erstetzt. Zusätzlich wird ein Speichern- und Cancel-Button eingefügt und ihnen natürlich auch noch die richtige Funktionalität zugewiesen. Zum Schluss bekommt das erste Eingabefeld den Focus, so dass der Anwender direkt losschreiben kann.

1. insert : function(form)
2. {
3. var inputs = form.getElementsByTagName('input');
4. var body = 'f0='+escape(inputs[0].value)+'&'+ 'f1='+escape(inputs[1].value)+'&'+ 'f2='+escape(inputs[2].value)+'&'+ 'f3='+escape(inputs[3].value)+'&'+ ‘f4='+escape(inputs[4].value);
5. RED_Ajax.callback = function()
6. {
7. RED_Adrbook.loadXML();
8. };
9. RED_Ajax.header('Content-Type', 'application/x-www-form-urlencoded');
10. RED_Ajax.run('eingabe.php','POST',false,body);
11. },

Um die neu eingefügten, bzw. später geänderten Daten auch an der Server und damit in die Datenbank zu schreiben, wird beim Klick auf den Speichern-Button die insert()-Methode aufgerufen. Sie lädt alle Eingabefelder und fügt sie zu einem langen String mit URL-konformer Schreibweise zusammen. Dann wird eine neue callback()-Methode des RED_Ajax-Objektes definiert, der Header zum Übertragen von Formular-Daten geändert und die Date an das Verarbeitungsscript gesendet. Nach dem Senden wird wiederum die loadXML()-Methode aufgerufen, um die neuen Daten vom Server abzufragen und anzugeigen.

1. edit : function() {},
2. update : function(form) {},
3. remove : function() {}
4. }

Bleiben zum Schluss noch 3 weiter Methoden übrig. Als kleine Herausforderung habe ich mir überlegt diese von euch selber erstellen zu lassen. Das ist auch gar nicht so schwer.

Z.B. ähnelt die edit()-Methode ja der add()-Methode, nur dass hier jetzt noch die Daten des aktuellen Mitgliedes eingefügt werden müssen. Auch die update()-Methode ist nur eine abgewandelte Version der insert()-Methode und bei der remove()-Methode brauch ja nur die aktuelle ID an den Server übermittelt werden, um den richtigen Datansatz zu löschen. Ich glaube fest daran, dass das jeder Lesen schaffen kann.

Hier nochmals die gesamte JavaScript-Datei zum Download.

• Adressbuch-Datei

Ähnliche Beiträge

• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 1
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1
• AJAX Adressbuch – Tutorial Teil 4

Die gesamte Funktionalität habe ich in ein eigenes Objekt gekapselt, um eine übersichtlichere, einfach erweiterbare und flexible Programmierung zu haben. Für solchen Kapseln benutze ich fast immer Literale.

1. var RED_Slideshow = {
2. slides : [],
3. current : 0,
4. messages : {
5. first : 'Sie sind am Anfang.',
6. last : 'Sie sind am Ende der Präsentation.'
7. },
8. init : function(element) { } ,
9. load : function() {},
10. goto : function(d) {},
11. create : function() {}
12. };

Zusätzlich zu den 4 Funktion gibt es noch 3 Eigenschaften. In der Eigenschaft slides werden die anzuzeigenden Slides zwischengespeichert um sie schnell ein- und auszublenden. Die Eigenschaft current repräsentiert das aktuelle Slide welches gerade angezeigt wird und in der Eigenschaft messages existiert ein Unterobjekt welches Meldungen beinhaltet, die im Verlauf der Benutzung dem Betrachter angezeigt werden können.

Mit der Methode init wird die Anwendung gestartet. Sie sucht dabei im angegebenen Container die Slides.

1. init : function(element)
2. {
3. var div = document.getElementById(element).getElementsByTagName('div');
4. for(var i=0; i<div.length; i++)
5. {
6. if(div[i].className == 'slide')
7. {
8. this.slides.push(div[i]);
9. }
10. }
12. this.load();
13. this.create();
15. document.getElementById('helper').onclick = function()
16. {
17. slideshow.goto(+1);
18. }
19. },

Als erstes werden die <div>-Tages innerhalb des Containers gesucht, der Klassenname überprüft und dann in die Eigenschaft slides abgelegt. Dann rufe ich die load()-Methode auf, um das aktuelle Slide anzuzeigen. Danach lasse ich über die create()-Methode die dynamische Navigation erzeugen.

Zum Schluss füge ich dem Objekt mit der ID helper einen Klick-Event hinzu. Dies soll nur verdeutlichen, wie auch ohne Buttons navigiert werden kann.

1. load : function()
2. {
3. for(var i=0; i<this.slides.length; i++)
4. {
5. this.slides[i].style.display = 'none';
6. }
7. this.slides[this.current].style.display = 'block';
8. },

Die load()-Methode ist super einfach. In ihr durchlaufe ich den Array mit den Slides und füge einen Style hinzu, der alle Slides unsichtbar schaltet. Zum Schluss wird dann das aktuelle Slide explizit auf sichtbar gesetzt.

Damit habe ich eine Methode die bei jedem Aufruf immer das aktuelle Slide anzeigt und alle anderen auf Unsichtbar setzt. So kann diese Methode später auch das Anzeigen von Slides außerhalb der Reihenfolge benutzt werden.

1. create : function()
2. {
3. var form = document.createElement('form');
4. form.setAttribute('id', 'navigation');
6. var btn1 = document.createElement('button');
7. btn1.setAttribute('type', 'button');
8. btn1.setAttribute('id', 'btn_prev');
9. btn1.appendChild(document.createTextNode('zurück'));
10. btn1.onclick = function()
11. {
12. RED_Slideshow.goto(-1);
13. }
15. var btn2 = document.createElement('button');
16. btn2.setAttribute('type', 'button');
17. btn2.setAttribute('id', 'btn_next');
18. btn2.appendChild(document.createTextNode('nächster'));
19. btn2.onclick = function()
20. {
21. RED_Slideshow.goto(+1);
22. }
24. form.appendChild(btn1);
25. form.appendChild(btn2);
27. var body = document.getElementsByTagName('body')[0];
28. var footer = document.getElementById('footer');
30. body.insertBefore(form, footer);
31. }

Nun zu der umfangreichsten Methode, da sie die dynamische Navigation erzeugt. Ich habe mich hier für ein kleines Formular entschieden, welches einfache Buttons beinhaltet. Ich erzeugt also zunächst den <form>-Tag und dann die 2 Buttons. Weiterhin fügt ich diesen Buttons noch Klick-Events hinzu, die wiederum eine Literal-Methode aufrufen.

Hier ist auf jeden Fall zu beachten, dass man nicht mit dem Schlüsselwort this arbeitet. Denn würde ich im Klick-Event this verwenden, dann würde sich das this auf den jeweiligen Button beziehen und nicht auf das Literal. Deshalb gehe ich den Umweg über den direkten Aufruf der Literal-Methode.

Zum Schluss setze ich das Formular vor meinen Fußbereich ein, in dem ich als erstes eine Verweis auf den <body>-Tag und dann einen Verweis auf den Fußbereich erzeuge.

1. goto : function(d)
2. {
3. this.current += d;
4. if(this.current == this.slides.length)
5. {
6. //alert(this.messages.last);
7. this.current = 0;
8. }
9. if(this.current < 0)
10. {
11. //alert(this.message.first);
12. this.current = this.slides.length-1;
13. }
14. this.load();
15. },

Die letzte Methode ist für die Navigation bestimmt. Ihr wird entweder der Wert 1 oder -1 übergeben. Dieser Parameter wird zum aktuellen Zähler hinzugefügt.

Als nächstes überprüft die Methode, ob das Ende oder der Anfang der Slideshow erreicht ist und setzt dann eigenständig den Zähler auf den passenden Wert um einen Schleifen-Vorgang zu erzeugen.

Zum Schluss ruft die Methode die load()-Methode auf, um das neue Slide auch anzuzeigen.

Damit ist auch schon das gesamte Slideshow-Literal erklärt. Es fehlt nur die Einbindung dieses Scriptes in die HTML-Datei und der Aufruf der Initialisierung mit der Parameter-Übergabe wo die Slides in der HTML-Datei liegen.

1. // JavaScript Document
2. <script type="text/javacript" src="RED_Slideshow.js"></script>
3. <script type="text/javascript">
4. //<!{CDATA[
5. window.onload = function()
6. {
7. RED_Slideshow.init('body');
8. };
9. //]]>
10. </script>

Da wir mit der create()-Methode ein neues DOM-Objekt mit der ID navigation erzeugen, habe ich meine CSS-Datei um folgende Formatierung erweitert.

1. #navigation {
2. position:absolute;
3. bottom:3em;
4. border:1px solid;
5. width:50%;
6. height:2em;
7. margin:auto;
8. text-align:center;
9. z-index:2;
10. left:25%;
11. }

Downloads

• HTML-Datei
• CSS-Datei
• JavaScript-Datei
• komplettes Set

Ähnliche Beiträge

• Slideshow mit einer HTML-Seite Teil 1
• AJAX Adressbuch – Tutorial Teil 2
• AJAX Adressbuch – Tutorial Teil 1
• HTML5 – Buch
• CSS Import macht Probleme

Fangen wir mit dem HTML an. Den Aufbau habe ich bewusst nicht sehr komplex gestaltet, um die spätere Programmierung einfach zu halten. Im Grunde besteht die Datei aus 5 Hauptkontainern:

1. header
   Hier besteht die Möglichkeit der Präsentation eine Überschrift und eine Tagline zu geben.
2. body
   Dieser Bereich enthält alle Slides die nacheinander angezeigt werden. Zusätzlich wird hier auch ein <noscript>-Tag eingebunden, um den Benutzern darauf hinzuweisen, dass die Präsentation nicht wie vorgesehen funktionieren kann bei deaktiviertem JavaScript.
3. helper
   Der helper-Bereich ist für zusätzliche Informationen vorgesehen und am Anfang noch leer.
4. navigation
   Dieser wird erst durch JavaScript erzeugt und beinhaltet die Navigationselemente.
5. footer
   Im letzen Bereich kann Platz für weitere Angaben, wie z.B. rechtliche Hinweise, genutzt werden.

Hier nun de gesamte Quellcode mit gekürzten Texten:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>RE-Design - JavaScript - Slideshow Präsentation</title>
6. <link rel="stylesheet" href="ssp.css" type="text/css" media="screen" />
7. <script type="text/javascript" src="ssp.js"></script>
8. <script type="text/javascript">
9. /*<!CDATA[*/
10. window.onload = function()
11. {
12. slideshow.init();
13. }
14. /*]]>*/
15. </script>
16. </head>
17. <body>
18. <div id="header">
19. <h1>Powerpoint Präsentation</h1>
20. <h2>Eine Slideshow mit JavaScript</h2>
21. </div>
22. <div id="body">
23. <noscript>
24. <p>Sie brauchen unbedingt JavaScript, um die ganze Funktionalität benutzen zu können.</p>
25. </noscript>
26. <div class="slide">
27. <h3>Slide 1</h3>
28. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.</p>
29. <p>Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
30. </div>
31. <div class="slide">
32. <h3>Slide 2</h3>
33. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.</p>
34. <p>Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
35. <p>Morbi consequat felis vitae enim ... Mauris aliquam dui eget purus.</p>
36. <p>Sed ut metus sed wisi commodo viverra ... Curabitur a turpis at ligula lobortis cursus.</p>
37. </div>
38. <div class="slide">
39. <h3>Slide 3</h3>
40. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit ... Nullam nunc.</p>
41. <p>Sed et lectus in massa imperdiet tincidunt ... Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
42. </div>
43. </div>
44. <div id="helper"></div>
45. <div id="footer">
46. © 2007 - <a href="http://www.re-design.de">RE-Design</a>
47. </div>
48. </body>
49. </html>

Als nächstes erkläre ich die wichtigsten Punkte in der CSS-Datei

1. @charset "utf-8";
2. /* CSS Document */
4. body {
5. margin:0;
6. padding:0;
7. font: 16px/130% normal normal Arial, Helvetica, sans-serif;
8. background-color:#b3d1e1;
9. }

Als erstes die Body-Formatierung. Hier wird der Abstand zum Rand auf Null gesetzt, um jeden Platz der da ist auch zu nutzen. Zusätzlich habe ich Anpassungen an der Typographie vorgenommen und die Basis-Hintergrundfarbe eingestellt.

1. #header {
2. position:absolute;
3. overflow:hidden;
4. top:0;
5. width:100%;
6. height:6em;
7. background-color:#069;
8. color:#fff;
9. padding:0 1em;
10. }

Der Kopfbereich wird absolut links oben platziert. Mit einer relative Höhe wird fester Platz für ihn reserviert. Weiterhin habe ich eine passende Hintergrund- und Schriftfarbe festgelegt. Um absolut positionierte Layer auch über die gesamte Breite fließen zu lassen wird die Breite auf 100% gesetzt.

1. #body {
2. position:absolute;
3. overflow:auto;
4. top:6em;
5. bottom:4em;
6. width:100%;
7. }

Auch der mittlere Präsentationsbereich ist absolut positioniert. Um keine Überlappung mit die Kopfbereich zu erhalten, fängt der Layer erst dort an wo der Kopfbereich endet. Gleiche habe ich auch für den Fußbereich eingestellt.

1. #footer {
2. position:absolute;
3. overflow:hidden;
4. height:3em;
5. bottom:0;
6. width:100%;
7. padding:.5em 1em;
8. background-color:#069;
9. }

Ähnlich wie der Kopfbereich wird auch der Fußbereich eine feste Positionierung zugewiesen. Allerdings im unteren Bereich des Browsers. Dabei musste ich darauf achten, dass die Höhe des Fußbereiches sich aus der Layerhöhe plus dem Innenabstand des Layers zusammensetzt.

1. #helper {
2. position:absolute;
3. overflow:hidden;
4. width:50%;
5. height:2em;
6. bottom:3em;
7. left:25%;
8. z-index:2;
9. }

Zwar ist in meinem helper-Layer noch nichts drin aber platzieren kann ich ihn auf jeden Fall schon mal. Das besondere daran ist, dass ich ihn über den Fußbereich halb überlappen lassen wollte. Um dieses zu erreichen muss über die z-index-Eigenschaft der Layer vor dem nachfolgenden Fußbereich gelegt werden.

1. .slide {
2. margin:1em;
3. }

Die Formatierung der einzelnen Slides habe ich nicht großartig verändert, um dem Umfang der CSS-Datei möglichst übersichtlich zu halten. Es ist aber jeder Zeit möglich, den einzelnen Slides über IDs ein individuells Design zu geben.

Und morgen im Teil 2 beschreibe ich die JavaScript-Programmierung die nötig ist um dem Ganzen Leben einzuhauchen.

Downloads

Ähnliche Beiträge

• Slideshow mit einer HTML-Seite Teil 2
• AJAX Adressbuch – Tutorial Teil 2
• AJAX Adressbuch – Tutorial Teil 1
• HTML5 – Buch
• CSS Import macht Probleme

Anders als bei PHP gibt es in JavaScript keine direkte DOM-Objekte, sondern alles muss über das document-Objekt laufen. Auch hier gibt es nur ein paar wichtige Methoden die man kennen sollte:

• document.createElement();
• document.createTextNode();
• element.appendChild();
• element.setAttribute();

Ich habe mir als Beispiel überlegt in einen <div>-Container eine ähnline Mitarbeiter-Liste zu erzeugen wie gestern mit PHP. Hier nun erstmal der Quellcode der HTML-Datei:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5. <title>RED - JavaScript - XML-Loader</title>
6. <script language="javascript" type="text/javascript" src="red_xml.js"></script>
7. <script language="javascript" type="text/javascript">
8. window.onload = function()
9. {
10. RED_DOM.create('container');
11. }
12. </script>
13. </head>
14. <body>
15. <div id="container"></div>
16. </body>
17. </html>

Wie man deutlich sehen kann, wird nach dem Laden des Dokumente die Methode meiner Objectes aufgerufen und als Parameter die ID des Containers übergeben.

In diesen Container wird nun die Mitarbeiterliste erzeugt.

1. var RED_DOM =
2. {
3. create : function(node)
4. {
5. var dom = document.getElementById(node);

Als erstes erzeuge ich einen Verweis auf das Element.

1. var mitarbeiter = dom.appendChild(document.createElement('ul'));

Dann füge ich eine ungeordnete Liste hinzu.

1. var person = mitarbeiter.appendChild(document.createElement('li'));
2. person.setAttribute('id','2007-12-15-RE');

Danach wird ein neuer Listeneintrag generiert und mit einer ID versehen.

1. var vorname = person.appendChild(document.createElement('span'));
2. vorname.appendChild(document.createTextNode('Enrico'));
3. var nachname = person.appendChild(document.createElement('span'));
4. nachname.appendChild(document.createTextNode('Reinsdorf'));

Der Vor- und Nachname wird, um ihn zu kapseln in einen <span>-Tag gelegt.

1. var contacts = person.appendChild(document.createElement('ul'));
2. var email = contacts.appendChild(document.createElement('li'));
3. email = email.appendChild(document.createElement('a'));
4. email.setAttribute('href', 'mailto:enrico@re-design.de');
5. email.appendChild(document.createTextNode('enrico@re-design.de'));

Um alle Kontakt auflisten zu können, erzeuge ich eine weitere Unterliste. In die die Email als Verweis abgelegt wird.

1. var telefon = contacts.appendChild(document.createElement('li'));
2. telefon.setAttribute('class', 'mobil');
3. var vorwahl = telefon.appendChild(document.createElement('span'));
4. vorwahl.appendChild(document.createTextNode('0177'));
5. var nummer = telefon.appendChild(document.createElement('span'));

6. nummer.appendChild(document.createTextNode('2822557'));
7. }

8. } ;

Zum Schluss füge ich noch die Listeneintrag für die Telefonnummer hinzu, welcher sich wiederum in 2 <span>-Tags aufsplittet.

Wie man erkennen kan ist der Ablauf dem von PHP sehr ähnlich. Was das spätere Arbeiten mit AJAX sehr erleichtert. Auch verhält sich ActionScript fast gleich, da es ähnlich strukturiert ist wie JavaScript.

• HTML-Datei
• JavaScript-Datei
• komplettes Set

Ähnliche Beiträge

• schnelle Erstellung von XML mit PHP
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1

Die einfache und trotzdem flexible Verwendung der erstellten Klasse lag mir dabei besonders am Herzen.

Verwendung der AJAX-Klasse

Eingebunden und verwendet wird die Klasse über folgende Befehle:

1. <script type="text/javascript" src="ajax.js"></script>
2. <script type="text/javascript">
3. //<![CDATA[
4. function afterLoad(xml)
5. {
6. alert(xml.toString());
7. }
8. ajax.callback = function()
9. {
10. afterLoad(this.responseXML);
11. }
13. ajax.init();
14. ajax.load('getXML.php');
16. //]]>
17. </script>

Wie ihr seht ist diese Verarbeitung sehr einfach einzusetzen. Als erstes muss natürlich die Klasse in das HTML-Dokument eingebunden werden. Dann legt man fest was passieren soll, wie die Daten verarbeiter werden sollen. Zusätzlich sollte man in der eigentlichen Klasse definieren das diese Funktion auch aufgerufen wird, sonst passiert gar nichts. Dazu habe ich einen sogenannten Hock vordefiniert, der dann einfach mit Funktionalität gefüllt wird. Zum Schluß initialisiert man nur nach die Klasse, um das XMLHttpRequest-Objekt anzulegen und läd dann die entsprechende Datei von Server. Fertig ist ist ein flexibles Ladesystem per JavaScript.

Detail zur AJAX-Klasse

Natürlich möchte ich euch auch noch den Inhalt meiner Klasse kurz präsentieren, denn ich denke dadurch wird der Ausbau ud die Erweiterung relativ einfach.

1. var ajax = {
2. req : null,
3. url : null,
4. method : 'GET',
5. async : false,
6. responseXML : null,
7. responseText : null,
8. init : function()
9. {
10. try
11. {
12. this.req = new XMLHttpRequest();
13. }
14. catch(e)
15. {
16. try
17. {
18. this.req = new ActiveXObject('Microsoft.XMLHTTP');
19. }
20. catch(e)
21. {
22. this.req = null;
23. }
24. }
25. if(this.req != null)
26. {
27. this.req.onreadystatechange = this.response;
28. }
29. },
30. load : function(u,m,a)
31. {
32. this.url = u;
33. this.method = m || this.method;
34. this.async = a || this.async;
35. if(this.req != null)
36. {
37. this.req.open(this.method,this.url,this.async);
38. this.req.send();
39. }
40. },
41. response : function()
42. {
43. var a = ajax.req;
44. if(a.readyState == 4)
45. {
46. if(a.status==0 || a.status==200 || a.statusText=='OK')
47. {
48. ajax.responseXML = a.responseXML;
49. ajax.responseText = a.responseText;
50. ajax.callback();
51. }
52. }
53. },
54. callback : function(){}
55. };

Ich habe mich bei der Erstellung der Klasse für Literal-Objekt entschieden, da ich die Verwendbarkeit dadurch als sehr einfach empfinde und das Instanzieren des Objektes entfällt.

Eigenschaften der Klasse

• req
  Hier wird später das XMLHttpRequest-Objekt abgespeichert, welches ja für den Verbindungsaufbau zu Datenquellen nötig ist.
• url
  Um später die URL auch in einem regelmäßigen Verfahren immer wieder abzurufen, wird sie in dieser Eigenschaft abgespeichert.
• method
  Auch wird für weitere Verwendung die Übertragungsmethode als Eigenschaft festgehalten. Mögliche sinnvolle Werte sind in diesem Fall HEAD, PUT und GET, wobei letzteres der Defaultwert ist.
• async
  Um eine synchrone Übertragen der Daten ein zustellen, setzt man diese Eigenschaft auf true.
• responseXML und responseText
  In diesen beiden Eigenschaften wird nach erfolgreicher Übertragung der Daten die Ergebnis gespeichert. Einmal als normale Zeichenkette und einmal als ein XML-Objekt.

Methoden der Klasse

• init()
  Diese Methode sollte immer vor allen anderen Methodenaufrufen benutzt werden, da sie das XMLHttpREquest instanziert und gleichzeitig wird festgelegt, dass die response()-Methode beim Statuswechsel aufgerufen werden soll.
• load(u,m,a)
  Durch die 3 übergebenen Parameter wird als erstes die URL der Datenquelle, die Übertragungsmethode und synchrone oder asynchrone Art festgelegen. Dann wird die Datenquelle geladen.
• response()
  In dieser Methode wird der Status der Übertragung und der Status des Übertragenen überprüft. Im Erfolgsfall werden die übertragenen Daten in die entsprechenen Eigenschaften übertragen und die callback()-Methode aufgerufen.
• callback()
  Dieser Hock dient zur flexiblen Benutzung der Klassen. Mit dem Überschreiben der leeren Funktion bestimmt man extern was mit dem Daten nach dem Laden geschehen soll.

Download der Dateien

• AJAX-Klasse
• HTML-Datei
• Kompletes Beispiel als ZIP-Datei

Ähnliche Beiträge

• dynamische Linkliste bringt mehr Usability
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• AJAX – PHP Schulung in Stuttgart
• AJAX Adressbuch

Ich schreibe gerade an einer Kalender-Komponente. Diese hat 2 Bereiche zur Verwaltung. Einmal gibt es da die Auflistung der Termine und es soll die Auflistung von Kategorien geben in denen sich die Termine befinden. Dazu habe ich nun im Admin-Bereich 2 Icons in die Toolbar gelegt und ein eigenes JavaScript geschrieben, denn das Icon für die Termine übergibt 2 Werte:

1. <a class="toolbar" href="javascript:submitbutton('list', 'dates');">Termine</a>

In dem JavaScript habe ich dann folgenden Code geschrieben:

1. function submitbutton(task, section)
2. {
3.     document.adminForm.task.value=task;
4.     document.adminForm.section.value=section;
5.     try {
6.         document.adminForm.onsubmit();
7.         }
8.     catch(e){}
9.     document.adminForm.submit();
10. }

Ganz so wie es Joomla braucht. Klar habe ich noch eine unsichtbares Feld für der Wert section erstellt. Nun ist aber bei mir zuhause beim Ausführen des Scriptes der Apache-Server immer abgestürzt und ich wusste eine sehr lange Zeit nicht warum. Bis ich aus Verzweiflung den Namen der unsichtbaren Feldes geändert habe. Nun heißt es area und alles funktioniert. Anscheinend wird der Wert section schon in Joomla anderweitig gebraucht und blockiert dadurch das korrekte Ausführen des Scriptes.

Ich hoffe, ich konnte euch mit dieser kleinen Feststellung helfen.

Ähnliche Beiträge

• Dozent an der Macromedia Fachhochschule
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1

Warum macht es Sinn eine solche Linkliste zu erstellen? Nun fast jeder der sich mit benutzerfreundlichen Websites auseinandersetzt weiß, dass Links innerhalb von Fließtext den Lesefluss stören. Außerdem kann es möglich sein Leser zu verlieren, wenn sie den Links innerhalb des Textes folgen und nicht wieder zurück kommen. Es ist besser erst am Ende des Textes alle im Text empfohlenen Links aufzulisten.

Leider kann es sehr mühselig sein, die Passagen im Text mit Fußnoten zu kennzeichnen und dann im unteren Bereich eine Linkliste mit Ankerpunkten zu erstellen. Sowas kann wunderbar JavaScript mit einem Automatismus übernehmen.

Einbindung des Link-Generators

Ich habe mir überlegt, dass die Einbindung möglichst einfach sein sollte. Deshalb habe ich ein externes Script geschrieben, welches eine Variable mit einem Literal erzeugt. Dieses Script muss nur in die eigene Website eingebunden werden und ein Event festgelegt werden, wann die Abarbeitung beginnen soll.

1. <script src="RED_LinkGenerator.js" type="text/javascript"></script>
2. <script type="text/javascript">
3. //<![CDATA[
4. window.onload = function()
5. {
6. var content = document.getElementById('content');
7. RED_LinkGenerator.init(content);
8. RED_LinkGenerator.writeList();
9. }
10. //]]>
11. </script>

Als Übergabeparameter für die Initialisierung wird der Container gewählt in dem die Links enthalten sind. Hier z.B. der <div>-Container mit der ID content. Als nächstes muss nur noch die writeList()-Methode ausgeführt werden und das Script erzeugt am Ende des übergebenen Containers eine sortierte Liste.

Ich habe extra diesen Vorgang in 2 Schritte unterteilt, um flexibel zu bleiben, denn ich kann mir vorstellen später eine Methode zu schreiben, die in einen komplett anderen Container die Liste schreibt oder auch einfach nur den Array zurückgibt.

Der Link-Generator selbst

Ich werde jetzt hier nicht jeden einzelnen Schritt erklären. Ich versuche mich auf die wichtigsten Punkte zu beschränken.

Die Initialisierung

Hier wird einfach nur der übergebene Container abgespeichert.

1. init: function(content)
2. {
3. this.container = content;
4. },

Die Methode writeList()

1. writeList: function()
2. {
3. var nodes = this.container.getElementsByTagName('A');
4. var ol = document.createElement('OL');
5. for(var n=nodes.length-1, f=nodes.length; n>=0; n--, f--)
6. {
7. var parent = nodes[n].parentNode;
8. var a = document.createElement('A');
9. a.setAttribute('href', '#a_'+n);
10. a.appendChild(document.createTextNode('['+f+']'));
11. var foot = document.createElement('SUB');
12. foot.appendChild(a);
13. var span = document.createElement('SPAN');
14. span.appendChild(document.createTextNode(nodes[n].firstChild.nodeValue));
15. span.appendChild(foot);
16. var li = document.createElement('LI');
17. var a = document.createElement('A');
18. a.appendChild(document.createTextNode(nodes[n].firstChild.nodeValue));
19. a.setAttribute('href', nodes[n].href);
20. a.setAttribute('id', 'a_'+n);
21. li.appendChild(a);
22. this.list.push(li);
23. parent.insertBefore(span, nodes[n]);
24. parent.removeChild(nodes[n+1]);
25. }
26. for(var n=this.list.length-1; n>=0;n--)
27. {
28. ol.appendChild(this.list[n]);
29. }
30. this.container.appendChild(ol);
31. }

In Zeile 15 werden aus dem Text alle Link gesucht und in Zeile 16 schon mal ein HTML-Knoten für die sortierte Liste angelegt.

Danach wird über eine for-Schleife alle Link-Knoten von hinten nach vorne verarbeitet, die Erklärung folgt später. Dabei wird als Erstes ein Verweis auf den Eltern-Knoten gespeichert und dann ein Link als Fußnote generiert (Zeile 22 – 27).

Diese Fußnote wird zusammen mit dem Linktext in einen neuen <span>-Tag gestellt (Zeile 29 – 31).

Danach wird der Listeneintrag mit einer Kopie des Orginallinks erzeugt (Zeile 33 – 39). Dieser Listeneintrag wird erstmal in einem Array zwischengespeichert.

Anschließend wird der Span-Knoten vor dem eigentlichen Link eingesetzt (Zeile 42) und der Link gelöscht (Zeile 43). Dabei muss aber darauf geachtet werden, dass in der Variablen nodes ein Verweis auf alle Links innerhalb des Container ist und wenn wie hier ein neuer Link, die Fußnote, hinzukommt auch die Anzahl der Links innerhalb des Textes steigt. Deshalb muss beim Löschen n+1 gerechnet werden. Durch diese dynamische Änderung der Menge der Links im Array hat mich auch veranlasst von hinten nach vorne zu arbeiten, denn dadurch wird der Löschvorgang vereinfacht.

Zum Schluss muss nur noch die geordnete Liste erzeugt werden. Da aber die Links im Array in der verkehrten Reihenfolge stehen, habe ich wieder von hinten nach vorne gearbeitet, um die richtige Reihenfolge zu bekommen (Zeile 45 – 48).

Fazit

Ich hoffe ich konnte mit diesem kleine Beispiel zeige, wie JavaScript das Arbeiten im Web erleichtern kann. Keine Ahnung ob das schon ein Ansatz von Web 2.0 ist, aber ich finde der Automatismus kann sich schon sehen lassen.

• Download

Ähnliche Beiträge

• AJAX-Klasse, einfach gebaut
• AJAX Abressbuch – Tutorial Teil 3
• AJAX Adressbuch – Tutorial Teil 2
• Slideshow mit einer HTML-Seite Teil 2
• Slideshow mit einer HTML-Seite Teil 1