Jedem seine Schicht

Websites bestehen heute aus mehreren Schichten: Contentschicht, Präsentationsschicht, Applikationsschicht. Das gilt selbst für eine simple HTML-Seite. Typischerweise sind diese Schichten auf unterschiedliche Dateien aufgeteilt. Das HTML-Dokument enthält Content, das Stylesheet die Formatierung und im Javascript ist Dynamisierung.
Wichtig ist hier die Ausschließlichkeit. So, wie im Sylesheet wenig Content zu finden sein wird, sollte andersherum im HTML-Quelltext keine Formatierung zu finden sein.
Logisch.
Dynamischer Content – dynmaische Regeln?
Wie aber sieht das aus, wenn der Content dynamisiert wird? Wenn bei der Eingabeprüfung per Javascript die Fehlermeldung ausgegeben werden soll? Hier verschwimmen schnell Grenzen und schnell steht im Javascript:

var fehler = „Das ist keine valide E-Mail-Adresse!“;
document.getElementById(„fehlermeldung“).insertData(0, fehler);

also Content. Hier sollte am Besten die Validierung serverseitig stattfinden, wo sie ohnehin implementiert sein muss, und das Ergebnis per AJAX abgeholt und dargestellt werden.
Weit häufiger aber gerät Formatierung ins Javascript. Zu einfach sind Elemente mit:

document.getElementById(„fehlermeldung“).style.display = „none“;

mal schnell zu verändern.
Auch diese Formatierung gehört ins Stylesheet. Soll ein Element dynamisch verschwinden, benötigen wir im Stylesheet:

.hidden {
display: none
}

und im Javascript:

document.getElementById(„fehlermeldung“).className = „hidden“;

Um nicht immer sämtliche Klassen eines Elementes zu überschreiben, habe ich mal schnell ein Script geschrieben, das Klassen an ein Element hinzufügt, löscht, oder einfach nur hin- und herschaltet:

var className = {
add: function(el, newClass) {
var classNames = el.className;
if (classNames.indexOf(newClass)==-1)
el.className = classNames + “ “ + newClass;
},
remove: function(el, newClass) {
var classNames = el.className;
var classNameArray = classNames.split(“ „);
var newClassNamesArray = [];
for(var i = 0; i <  classNameArray.length; i++)
if (classNameArray[i].indexOf(newClass)==-1)
newClassNamesArray.push(classNameArray[i]);
classNames = newClassNamesArray.join(“ „);
el.className = classNames;
},
toggle: function(el, newClass) {
var classNames = el.className;
if (classNames.indexOf(newClass)>-1)
this.add(el, newClass);
else
this.remove(el, newClass);
}
};

Ein Element verschwindet nun, indem man einfach

className.add(document.getElementById(„fehlermeldung“), „hidden“);

aufruft.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s