HTML5, CSS3, JavaScript, AJAX, PHP und MySql Beispiele

Auf den Folgeseiten sind Beispiele zu den oben genannten Themen aufgeführt.

Dies ist kein Nachschlagewerk oder Tutorial für HTML5, CCS3 usw. Dafür gibt es genug Seiten. Vielmehr werden Kenntnisse in den Themengebieten vorausgesetzt.

Die Beipiele sind eine Sammlung von Themen, die mir während meiner Tätigkeit untergekommen sind und die ich für interessant halte. Teilweise habe ich im Internet auf Anhieb nichts passendes gefunden, oder es gab kein funktionierendes Beispiel.

Im folgenden ein paar Links, die ich nützlich finde:

HTML-Elementreferenz: selfhtml

CSS-Referenz: css4you

JavaScript/DOM: selfhtml

Eine Einführung in JavaScript: molily

Tutorials und Referenzen zu HTML, CSS und JavaScript: W3schools

Aktuellen Browser auf HTML5 Fähigkeit testen: HTML5 Browsertest

Grobe Übersicht HTML5/CSS3 Fähigkeit: HTML5/CSS3 Test

Detail Übersicht HTML5/CSS3 Fähigkeit: HTML5/CSS3 Detailtest

Auf dieser Seite sind Beispiel für Anwendungen zusammengefasst.

Dabei wird Wert auf die Verständlichkeit und Übersichtlichkeit gelegt. Sicherheitsabfragen und Prüfungen sind deshalb nur dort vorhanden, wo sie unbedingt erforderlich sind.

HTML5 bietet das Gerüst für eine Anwendung.

Auf der folgende Seite sind einige Tips für den Umgang mit HTML hinterlegt.

Mit CSS wird die Formatierung, wie Schrift und Farben, für die komplette Anwendung festgelegt.

Mit CSS3 gibt es neue Möglichkeiten eine WEB-Seite zu gestalten.

Die folgende Seite zeigt die CSS3 Eigenschaften.

JavaScript liefert die Intelligenz auf Clientseite und dient u.a. zur Prüfung, Aufbereitung und Anzeige der Daten.

Mit DOM sind alle möglichen Manipulationen an einem HTML-Dokument möglich, ohne das die Seite neu geladen werden muss.

Eine Reihe von APIs bieten einfache Möglichkeiten der Datenverarbeitung auf Clientseite.

Auf der folgenden Seite werden die Möglichkeiten des Zugriffs über DOM, die FormsAPI, die WEB-Storage-API, die Drag and Drop API und die Vollbild API beschrieben.

Mit AJAX wird der Datentransfer zwischen Client und Server realisert und die Datenübertragung minimiert.

PHP ermöglich den Zugriff auf die Datenbank. Damit wird die Datenpflege und die Selektion auf die Daten realisert. MySql ist die Datenbank zur zentralen Speicherung der Daten.

Auf der folgende Seite ist nur der Zugriff auf die Datenbank mit PHP und der Update der Daten in der Datenbank mit PHP erklärt.

Die meisten Funktionen von PHP werden allerdings nicht gebraucht.

Einige JavaScript Funktionen kann man immer wieder gebrauchen.

Diese Funktionen habe ich in einer eigenen JavaScript-Datei, die ich zusätzlich in mein Dokument mit einbinde.

Funktion: ausgabe

Hat man früher nach einem Debugger für C-Programme gefragt, erhielt man häufig die Antwort: printf - die Standardausgabefunktion von C.

Im Grunde hat sich daran nicht viel geändert. Die meisten Fehler in JavaScript kann man mit einem einfachen Alert oder der WEB-Konsole finden. Man muss sich also nicht unbedingt in den Firebug einarbeiten.

Bei einem Alert muss man allerdings immer wieder OK drücken.

Deshalb habe ich mir die Funktion ausgabe erstellt. Diese Funktion öffnet ein weiteres Fenster und gibt dort bis zu drei übergebene Variablen aus.

Test Ausgabe ausgabe()

Funktion: addElement

Wenn man mit DOM arbeitet, muss man z.B. in einem div Elemente hinzufügen.

Dies geschieht mit der Funktion createElement. In der Regel braucht man aber auch noch einen Text z.B. bei einem Link oder bei einer Tabelle. Dazu wird mit createTextNode der Text erzeugt und dann mit appendChild an das neue Element angehängt. Das neue Element muss dann ebenfalls mit appendChild an das div gehängt werden.

Für diese vier immer gleichen Funktionsaufrufe habe ich mir eine Funktion erstellt.

Die Funktion addElement wird mit zwei bzw. drei Parametern aufgerufen.

Der erste Parameter ist die Bezeichnung des Elements, das erzeugt werden soll (z.B. a oder td).

Der zweite Parameter ist der Zeiger auf das Elternelement, der mit document.getElementById() geholt wird.

Als dritter Parameter kann ein Text übergeben werden. Ist der Parameter gesetzt, wird der Text erzeugt und an das neue Element anghängt.

Die Funktion gibt den Zeiger auf das erzeugte Element zurück. Mit diesem Wert können dann z.B. mit setAttribute weitere Attribute hinzugefügt werden.

Beispiel 1: Link erzeugen
  ve_a = addElement("a",ve_div,"Linkname");
  ve_a.setAttribute("href","Ziellink");

Beispiel 2: Tabellenzeile und Tabellenfeld anfügen
            ve_table ist der Zeiger auf die Tabelle
  ve_tr = addElement("tr",ve_table);         
  ve_td = addElement("td",ve_tr,"Text im Feld");

addElement()

Funktion: elementLeer

Wurden mit DOM Daten z.B. in ein div eingefügt, so kommt es oft vor, dass diese Daten erneut gelesen werden, z.B. neu sortiert, und erneut in diesem div angezeigt werden sollen.

Dazu müssen die alten Elemente in dem div erst gelöscht werden.

Die Funktion elementLeer löscht alle Elemente in dem übergebenen Element. Als Parameter wird der Funktion die ID des Elements übergeben, dass geleert werden soll. Das Element selber bleibt bestehen.

elementLeer()

Funktion: tabelleLeer

Mit tabelleLeer werden alle tr-Elemente unterhalb eines Table-Elements gelöscht.

Als erster Parameter wird die ID der Tabelle übergeben.

Als zweiten Parameter kann eine Zahl übergeben werden. Dann bleiben soviel Zeilen erhalten.

tabelleLeer()

Funktion: seiteSchliessen

Bei einem Eventlistener kann man nicht self.close() als Funktion angeben.

Deshalb gebe ich beim Eventlistener für einen Schliessen-Button die Funktion seiteSchliessen an.

Die Funktion ruft dann nur self.close() auf.

seiteSchliessen()