M$IE-kompatible Programmierung
|
Strategie
Ein Kalender wird ganz offensichtlich am besten mit einer
Tabelle dargestellt.
▼
Der meist-verwendete Browser kann zwar mit DOM-Methoden Tabellen herstellen,
verlangt dazu jedoch die Berücksichtigung einiger Sonder-Regeln.
Daher wird folgender Umweg gewählt:
♣
Zunächst wird eine leere Tabelle erzeugt. Das ist in HTML kein Problem.
Allerdings ist der Kalender dann nicht mehr portabel, denn es ist unerfahrenen
EntwicklerInnen nicht zumutbar, eine HTML-Tabelle mit genauen (!) Vorgaben zu erstellen.
♣
Daher wird die Tabelle mit den Inline-Methoden von Javascript erstellt. Das ist
wesentlich stabiler, weil die Verwendung auf eigenen Webseiten nur wenig Aufwand
erfordert. Allerdings sind diese Methoden veraltet und nicht XML-kompatibel.
♣
Jede Zelle der Tabelle erhält ein eindeutiges id-Attribut.
Damit ist sie für die nachfolgende Bearbeitung mit DOM-Methoden geeignet.
|
♣
Die Zellen der fertigen Tabelle können mit DOM-Methoden beliebig verändert werden:
Man kann die Daten des aktuellen Monats eintragen, oder zu einem beliebigen anderen
Monat wechseln.
♣
Das Beispiel bietet darüber hinaus die Möglichkeit, bei Klick auf einen Tag die
Daten an eine private Javascript-Funktion weiterzugeben. Dafür wäre das
onclick-Attribut besonders geeignet.
▼ Leider zeigt sich hier ein weiteres,
jahrelang nicht behobenes Problem von M$IE: Der Wert des Attributs kann zwar (je nach Monat)
geändert werden, der onclick-Handler
spricht dann aber nicht mehr an.
Daher wird jede einzelne Zelle mit einem Hyperlink ausgestattet -
Das funktioniert sogar mit M$IE . .
|
Aufbau einer Tabelle mit Inline-Javascript:
•
Dieser Code muss im <body> einer Webseite enthalten sein,
und zwar genau an jener Stelle, wo die Kalender-Tabelle entstehen soll.
•
Das Beispiel erzeugt 'an Ort und Stelle' eine einfache Tabelle mit 6 Zeilen zu je
7 Spalten.
•
Die Methode document.write erhält als Argument den zu
schreibenden HTML-Code als String. Im Quelltext der angezeigten Seite ist der
Javascript-Code sichtbar, nicht jedoch der damit erzeugte HTML-Code.
•
Hinweis: Zum Tabellen-Aufbau werden wegen notorischer M$IE-Probleme
keine DOM-Methoden verwendet.
Die gezeigte Methode ist außerdem nicht
XHTML kompatibel.
|
Javascript (vereinfacht):
<script type="text/javascript">
document.write(" <table>");
for(var i=0;i<6;i++) { // Zeilen
document.write(" <tr>");
for(var j=0;j<7;j++) { // Spalten
document.write("<td>");
document.write(" </td>");
}
document.write(" </tr>");
}
document.write(" </table>");
</script>
|
id-Attribute
Für den Zugriff mit DOM-Methoden sind mehrere Varianten möglich.
Die beste Voraussetzung sind eindeutige id-Attribute
für jede einzelne Zelle der Tabelle.
•
Das Beispiel zeigt, wie man solche Attribute mit Javascript erzeugen kann:
•
An Stelle des einfachen <td>-Elements im ersten Beispiel
wird ein Element mit id-Attribut erzeugt.
Die Attribute werden in einer Schleife systematisch erstellt, z.B. lautet
das id-Attribut der Zelle in Zeile i=3, Spalte j=4
auf "z3s4"
|
Einfacher HTML-Code (Ausschnitt aus dem Beispiel oben):
document.write("<td>");
Erweiterung mit id-Attributen für jede Zelle:
t = "<td";
id = "z"+i.toString();
id += "s"+j.toString();
t += id + ">";
document.write(t); // <td id="z1s1">
|
DOM-Zugriff
Mit DOM-Methoden kann man prinzipiell erst
nach dem Aufbau einer Webseite auf deren Elemente zugreifen -
Vorher existieren diese Elemente noch nicht.
•
Das Ereignis
(event) onLoad wird nach dem Abschluss des Lade-Vorgangs
ausgelöst und wird oft zur Initialisierung mit DOM-Methoden verwendet.
•
Dazu wird das <body>-Element mit dem
Attribut onLoad versehen. Dort wird die Javascript-Funktion
angegeben, welche bei onLoad auszuführen ist.
•
In der bezeichneten Funktion (hier my_onload) werden alle
auszuführenden Arbeiten organisiert.
♦ Details zu
Ereignissen (events)
|
<html>
<head>
...
<script type="text/javascript">
function my_onload() {
alert("onLoad !");
}
</script>
</head>
<body onload=" my_onload()">
...
</body>
|
DOM-Elemente und Tochter-(Child)-Elemente
Die Daten befinden sich nicht in den adressierbaren Elementen
(nodes), sondern in einem oder mehreren Tochter-Knoten.
•
Das ist notwendig, wenn man die Daten z.B.
mit <span style="...">-Elementen formatieren will,
oder wenn die Daten von einem <a href="...">
Hyperlink umschlossen werden sollen.
♦ Details zu
DOM-Methoden,
Text-Knoten
|
HTML-Beispiele für Daten in einer Tabellen-Zelle (vereinfacht):
<td id="z1s1">123</td>
<td id="z1s2"><span>234</span></td>
<td id="z2s3"><a><span>345</span></a></td>
Element id="z1s2" enthält
einen childNode (span-Element), dieser jedoch einen
weiteren childNode mit den Daten.
Element id="z2s3" enthält insgesamt 3
verschachtelte childNodes
|
Alte Daten entfernen
•
Das Beispiel rechts zeigt, wie man aus einem DOM-Element (z.B. aus einer Tabellen-Zelle)
alle vorhandenen Daten entfernt.
•
Es funktioniert unabhängig davon, welche und wie
viele Tochter-Elemente im Element enthalten sind.
|
Javascript: Alle Tochter-Elemente entfernen.
var n = document.getElementById("z2s4");
while(n.childNodes.length>0) {
n.removeChild(n.firstChild);
}
|
Neue Daten eintragen
Nach der Entferung aller alten Daten werden neue eingetragen:
•
Dazu wird ein neues Text-Element (TextNode) mit den
gewünschten Daten erzeugt, und an das bereits vorher adressierte Element
(Tabellen-Zelle) angehängt (append).
•
Nach Ausführung dieses Codes zeigt die Zelle in der Webseite die
Daten "987" an.
|
Javascript: Daten eintragen
var nt = document.createTextNode("987");
n.appendChild(nt);
Das Beispiel wirkt genauso wie dieser HTML-Code
<td id="z2s4">987</td>
Der kleine Unterschied: HTML kann nur einmalig geladen werden,
Javascript DOM-Code kann beliebig oft und mit programmierbaren Daten
ausgeführt werden - In einem Kalender z.B. bei Monats-Wechsel.
|
Komplexe Daten eintragen
Für höhere Ansprüche müssen meist mehrere Elemente eingetragen werden.
Das geschieht schrittweise und erscheint für AnfängerInnen meist etwas komplex:
•
Im Beispiel wird zuerst das Ziel-Element (Tabellen-Zelle) mit dem gesuchten
id-Attribut adressiert.
•
Aus den Daten (hier die Zahl 876) wird ein Text-Element nt erzeugt.
•
Danach wird ein <a> Hyperlink-Element na
erzeugt.
•
Das Link-Ziel wird als Attribut href erzeugt und an das
Element na angehängt.
•
Das Text-Element nt wird an das
Hyperlink-Element na angehängt.
•
Das fertige Hyperlink-Element na wird an die
Tabellen-Zelle n angehängt.
•
Nach Ausführung des Codes enthält die Zelle die Daten "876".
Beim Anklicken wird die Funktion test mit dem Argument
876 aufgerufen.
|
Mehrere Elemente erzeugen und anhängen:
var n = document.getElementById("z1s3");
var na = document.createElement("a");
var nah = document.createAttribute("href");
nah.nodeValue = "javascript:test(876)";
na.setAttributeNode(nah);
var nt = document.createTextNode("876");
na.appendChild(nt);
n.appendChild(na);
Das Beispiel erzeugt in einer bestehenden Zelle folgende Struktur:
<td id="z1s3">
<a href="javascript:test(876)">876</a>
</td>
|
|
♦ Details zur Anwendung von
DOM-Methoden mit Javascript
|
♦
Details zum Kalender-Beispiel können sie dem Quellcode dieser Webseite entnehmen.
HTML und Javascript Code ist frei zugänglich !
|
Javascript
