Diese Seite schaut viel besser in einem Browser aus, der Web-Standards unterstützt, die Seite ist aber für jeden Browser geeignet. Trotzdem empfehle ich den Download z.B. des Firefox, Opera oder Internet Explorers.
Diese Projekt-Seite entsteht im Rahmen des Unterrichtes "JavaScript" während meiner Teilnahme an einer Weiterbildungsmaßnahme beim Bildungsträger Cimdata. Sie soll zum einen meinen Lernerfolg dort dokumentieren, dient letztlich als Projekt und zum anderen soll sie mich auch nach Abschluß des Lernmoduls auf meinem weiteren Weg bei der Programmierung in JavaScript begleiten.
Viele der hier vorgestellten Beispiele und Programme werden auf den nachfolgenden Seiten beschrieben und erklärt. Die Reise ist noch lange nicht zu Ende und wird wohl auch nie enden.
Das Navigationssystem ist eine Ajax-Bibliothek namens "Accordion", die hier beschrieben wird.
Zufallsausgabe mit Effekten (Titel-Leiste verschiebbar)
Per Klick wechselt die Panorama-Sicht
Eine kleine Tabelle als Beispiel für eine for-Schleife
Beispiel einer while-Schleife
Läuft als Alert-Box - keine Panik - nix Schlimmes!
Was gibt es da noch zu sagen - ein Hammer!
Eine dynamisch generierte Tabelle wie bekannt - mit Berechnungen
Wirklich sehr einfach - ohne Schnickschnack
Ein Jahres-Kalender (Farben sind im JavaScript konfigurierbar)
Einige Beispiele, die zeigen, was man alles so in ein bestimmtes Element hineinschreiben kann (getElementById)
Einige Beispiele für PopUp-Fenster mit kleineren Schließ-Effekten
Zwei Animations-Effekte
Klick mich! Klick mich!
Ein Beispiel mit dem Framework Slimbox
Einige Spielereien mit Strings
Ajax ist nichts Neues. Es ist immer noch JavaScript. Es vereint die Vorteile der einfachen Befehlssyntax von JavaScript und bietet einen serverseitigen Austausch von Live-Daten, d.h. es wartet nicht unbedingt auf abgeschlossene Benutzereingaben.
Weitere Schlagworte, die zu Ajax gehören, sind XML, XLS, JSON.
Die Erklärung, Einarbeitung und den grundsätzlichen Aufbau von Ajax erkläre ich hier.
Für eine sehr hübsche Bilderpräsentation gibt es neben grossen Light- und Slimboxen noch einen weiteren Vertreter, den ich hier vorstllen mag: ImageFlow.
Ich will auch keine weiteren Worte hierüber verlieren. Einfach mal anschauen!
Ein wirklich kleiner simpler Chat, der die Funktionen des Prototype-Frameworks nutzt.
Quellcode ist komplett ausdokumentiert. Die Chat-Daten werden per GET an PHP/MySQL übergeben und können somit leicht administriert werden.
Durch den Einsatz von Prototype ist der eigentliche Quellcode minimal.
Es werden lediglich für die DOM-Elemente die $-Variablen genutzt, sowie für das Laden und Updaten der Datenbank Ajax.Request und Ajax.Updater.
Effekte sind mit Scriptaculous eingebunden.
Eine Art Dateimanager, der ein Verzeichnis auf dem Server ausliest und die Daten dynamisch in einer Navigationsleiste
darstellt. Bestimmten Dateitypen (Verzeichnisse, Text, PDF, Bilder, unbekannte Dateien) werden anhand ihrer Datei-Endungen Aktionen zugewiesen.
Quellcode ist ausdokumentiert.
Der JavaScript-Code ist komplizierter als beim Chat, da die Dateiliste in dem DOM-Baum eingehängt und ggf. wieder entfernt werden.
Der Einsatz der Prototype-Bibliothek ist hier fast unerlässlich, da diese das Handling mit dem DOM in verschiedenen Browsern sehr viel einfacher macht.
Dieser Eventkalender wird mit DOM-Elementen (createChild) dynamisch erzeugt. Zum vereinfachten Ansprechen der erzeugten IDs wird das Prototype-Framework genutzt.
Im Kalender selbst können Einträge vorgenommen werden, die in einer Datenbank abgelegt werden. Der Datenaustausch JavaScript-PHP/MySQL erfolgt über JSON
Das "versteckte" Element zum Eintragen von neuen Werten kann verschoben werden. Es nutzt dabei die Effekte von Scriptaculous.
Eine Sache am Rande: Durch einen kleinen Unterschied beim DOM trotz Prototype war ich gezwungen per Browserweiche getrennte Dateien zu erstellen.
Neben diesen Manki werde ich - wenn noch Zeit bleibt, Umrechnungen von Unix/Timestamps in Formulare (dahert die Alert-Meldung) und umgekehrt implementieren.
Freue mich über jede erdenkliche Hilfe.
Mit dieser Anwendung zeige ich, dass der Datenaustausch mit Ajax und PHP/MySQL auch ohne die Einbindung der großen Bibliotheken wie Prototype funktioniert. Auf das Einfügen von DOM-Elementen habe ich wegen der verschiedenen Browserunterscheidungen verzichtet und verwende daher feste Container und arbeite mit innerHTML-Befehlen. Das ganze kann auch schnell auf eine XML-basierte Lösung ohne Datenbank umgestellt werden.
| Einleitung --> |