RE-Design – Enrico Reinsdorf

Artikel-Schlagworte: „JavaScript“

Vom Montag bis Dienstag habe ich ein Einzelcoaching zum Thema AJAX-PHP-Programmierung gegeben. Der Teilnehmer war im öffentlichen Dienst (Gerichte) tätig und hatte schon viele Vorkenntnisse in PHP.

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.

Da ich meinen Laptop gerade neu installiert habe, war ich seit langem mal wieder auf der Website von Skype. Dabei ist mir erst jetzt aufgefallen, das sie unter "use skype" eine tolle Animation haben. Erst dachte ich es wäre, wie üblich, mit Flash gemacht worden. Aber beim genaueren hinsehen, habe ich schnell festgestellt, dass das ganze komplett in JavaScript umgesetzt wurde.

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.

Im dritten Teil meines Tutorials möchte ich euch zeigen wie ich per JavaScript eine Verbindung zum Server aufbaue und Daten zum Server schicke bzw. vom Server hole. Durch die Beschreibung in Teil 1 und Teil 2 meines Tutorials habe ich hoffentlich eine gute Basis geschaffen einen Schritt weiter zu gehen.

Diesen Beitrag weiterlesen »

Nachdem ich gestern erklärt habe wie die HTML-Datei, das dazugehörige CSS-Design und die XML-Datenstruktur aufgebaut sind, werde ich mich nun der clientseitigen Programmierung widmen.

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.

Diesen Beitrag weiterlesen »

Nachdem ich gestern im ersten Teil den Aufbau der HTML-Seite und das Design mit CSS beschrieben habe, folgt nun die Programmierung das Ganzen. Es ist gar nicht so schwer wie man Denken könnte. Nur ganze 4 Funktionen brauche ich für meine einfache Slideshow.

Diesen Beitrag weiterlesen »

Im nächsten Beispiel möchte ich zeigen wie man mit JavaScript wunderbar das DOM einer HTML-Datei ändern kann. Dazu habe ich mich für den Nachbau von S5 entschieden. Im ersten Teil werde ich den Aufbau der HTML- und CSS-Datei erklären, um dann morgen in die JavaScript-Programmierung einzusteigen.

Diesen Beitrag weiterlesen »

Hier nun ein weiterer Artikel zum Thema XML-Erzeugung mit Web-Programmiersprachen. Im Gegensatz zu gestern konzentriere ich mich heute auf das Erstellen mit JavaScript. Aber auch das ist nicht sehr schwierig.

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();

Diesen Beitrag weiterlesen »

Bei der Erstellung von moderen Websites spielt AJAX eine immer wichtigere Rolle. In diesem Tutorial möchte ich euch eine kleine JavaScript-Klasse vorstellen. Diese Klasse kann dann Grundlage für weiter tolle Webanwendungen sein kann.

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

Joomla ist schon ne Sache für sich. Wieder einmal habe ich nach längere Suche eine Merkwürdigkeit herausgefunden, die mir so nicht nicht wirklich klar war.

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.

Heute möchte ich euch ein kleines JavaScript geben, welches aus einem vorgegebenen <div>-Container alles Links extrahiert und sie als Linkliste am Ende des Containers anhängt. Hier gibt es das Demo.

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.

Diesen Beitrag weiterlesen »