6. Die Lehre von Bilderausgabe aus mehrdimensionalen
Arrays in generierten Javascript-Tabellen
Einleitung Javascript ist in erster Linie eine Fun-Sprache und wenn der
Sternenhimmelstuermer nun ein Artikel über die Ausgabe von Bildern in
generierten Tabellen erörtert, so ist das dem Umstand geschuldet, dass
ganze Bilderserien in Tabellen ausgegeben werden können, also ein
ganzes Bilderalbum mit einem Mausklick komplett angelegt werden kann,
ohne irgendein Bild erstmal anzeigen müssen.
In früheren Zeiten wäre das ein Hit, da man z. B. mehrere
Urlaubsbildergalerien mit einem Optionsformularfeld ausgeben konnte
(eine Option entspräche einer "Urlaubsdatenbank"), ohne alle Bilder
anzuzeigen.
Aber auch so ist das eine tolle Sache, die wirklich unter allen
aktuellen Browsern läuft!
Datenbankgestützte Anwendungen sind wie üblich den herkömmlichen
Anwendungen überlegen...
Um diese Abhandlung zu verstehen, sollten Sie sich die Abhandlung über
die Ausgabe von Datenbanken
(Arrays) im DIV-Container durchlesen. Da wurde der folgende Quellcode
erklärt bis auf wenige Zeilen, die nun hier extra abgehandelt
werden, was fortgeschrittenen Usern im Prinzip reichen müsste.
Inhaltsangabe
Ausgabe von Bildern in Tabellen nach DOM Modell für alle aktuellen Browser
Ausgabe von Bildern und Links
Ausgabe von Bildern in Tabellen nach DOM Modell für alle aktuellen Browser
Diesmal nur eine extrem langweilige Demo und
der Quellcode mit einer
Erklärung - Ist für den Sternenhimmelstuermer nur eine Spielerei:
<html>
<head>
<meta
name="generator" content="HTML Studio">
<title>Datenbankabfrage Demo</title>
<meta
name="author" content="Sternenhimmelstuermer">
<meta
name="description" content="datenbank">
<SCRIPT
LANGUAGE="JavaScript"><!--
var datenbank = new Array();
datenbank[0] = new
Array("Meyer","Uwe","Berlin","probe1.png");
datenbank[1] = new
Array("Müller","Anton","Berlin","probe2.png");
datenbank[2] = new
Array("Meyer","Werner","Berlin","probe3.png");
function db() {
node =
document.getElementById("Antwort");
node.appendChild(Tabellenausgabe());
}
function Tabellenausgabe() {
var Tabelle =
document.createElement("table");
var Tbody =
document.createElement("Tbody");
for (var
i=0;i<3;i++) {
Reihe = document.createElement("tr");
Zelle = document.createElement("td");
Zelle1 = document.createElement("td");
ZellenInhalt = document.createTextNode(datenbank[i][0] + ";" +
datenbank[i][1] );
ZellenInhalt1
=document.createElement("IMG");ZellenInhalt1.setAttribute("src",
datenbank[i][3]);
Zelle.appendChild(ZellenInhalt);
Zelle1.appendChild(ZellenInhalt1);
Reihe.appendChild(Zelle);
Reihe.appendChild(Zelle1);
Tbody.appendChild(Reihe);
}
Tabelle.appendChild(Tbody);
Tabelle.setAttribute("border",1);
Tabelle.style.bordercolor = 'red';
Tabelle.style.backgroundColor = 'yellow';
return
Tabelle;
}
//--></SCRIPT>
</head>
<body>
<center>
<FORM
NAME="datenbankForm">
<div>Ein Kleiner
Datenbanktest<div>
<br>
<br>
<div>Druecken Sie den
Ergebnisbutton.Alle Daten werden gedruckt.</div>
<INPUT TYPE="BUTTON"
onClick="db()" VALUE="Ergebnis">
Antwortfeld: <div
ID="Antwort">Hier steht die Antwort</div>
</FORM></center>
</body>
</html>
Hinweis: NoScript von Firefox schlägt erstmal an, aber sie können
die dann angezeigten Links freigeben - Hey, dass ist alles harmlos...
Ja, sind nur ein paar Zeilen Code, die geändert wurden. In blau ist nun
der jeweilige Bildname in der Datenbank abgelegt worden, z. B. "probe1.png" , was
später als relativer Pfad auf dem PC oder im Internet interpretiert
wird - wie man Pfade ändert, wissen Sie doch?
Das Bild bzw. deren Name hat also das Pseudonym datenbank [0][3], weil es im
mehrdimensinale Array in der ersten Zeile steht, was einer 0 entspricht
und an vierter Stelle steht, weil aber Javascript bei Null zu zählen
anfängt einer 3 entspricht - welcher Vollidiot hat eigentlich diese
zählweise eingeführt, gerade in Datenbanken ist so eine zählweise
einfach lächerlich...
ZellenInhalt1
=document.createElement("IMG");ZellenInhalt1.setAttribute("src",
datenbank[i][3]);
Die Tabelle wird mit der Node-Methode erstellt und es gibt viele die
Behaupten, dass Bilder in einer solchen Tabelle nicht möglich wären,
aber die document.createElement
Methode sieht es ausdrücklich vor, dass ein Image erstellt werden kann. Der
Zelleninhalt1 der ersten Spalte wird also erstmal definiert. Dann
werden die Attribute gesetzt: Das ist eben ein src mit dem Namen datenbank[i][3] . Würden Sie
ein normalen Namen verwenden, wie "probe1.png" , dann müßte
dieser in Anführungszeichen stehen, aber wir benutzen ja wieder die
Datenbank als Ursprungsort und deshalb werden uns die Anführungsstriche
gnädigerweise erlassen...datenbank[i][3]
ist nun wiederum ein Teil des for i -Befehls, weil wir
sämtliche Datenbankinhalte der Tabelle, also datenbank[0][3], datenbank[1][3] , datenbank[2][3] in einer Spalte
ausgeben wollen.
Die Größe der Tabelle und Bilder wurde nicht vergeben, aber der
Sternenhimmelstuermer empfiehlt lieber eine freie Tabelle und umgekehrt
die größe der Bilder im Bildbearbeitungsprogramm festzulegen. Wenn Sie
mit Table - Größen und Bild Attributen bei setAttribute herumspielen,
können Bilder verzerrt, nur halb angezeigt werden... alles unnötig.
Wie gesagt, es empfiehlt sich über Optionsfelder die zu generierende
Tabelle aufzurufen.
Wenn Sie den Code halbwegs verstanden haben, dann können Sie
Textbausteine, Links, Texte usw. je nach ihrer Vorstellung
zusammensetzen und haben ein quasi Contentmanagementsystem zur
Bilderverwaltung bestehend aus Javascript - Da sage jemand noch, dass
die Lehre von datenbangestützten Systemen vom Sternenhimmelstuermer
uninteressant sei. Solche Äußerungen kommen dann von solchen Menschen,
die nicht begriffen haben, dass dieser Stil mächtiger ist, als
das wilde herumprogrammieren mit Variablen...
Ausgabe von Bildern und Links
Ein kleiner Nachtrag, weil das setzen von Hyperlinks nicht ganz so einfach ist. Erstmal die Demo und los geht es:
<html>
<head>
<meta name="generator" content="HTML Studio">
<title>Datenbankabfrage Demo</title>
<meta name="author" content="Sternenhimmelstuermer">
<meta name="description" content="datenbank">
<SCRIPT LANGUAGE="JavaScript"><!--
var datenbank = new Array();
datenbank[0] = new Array("Meyer","Uwe","http://www.sternenhimmelstuermer.eu","probe1.png");
datenbank[1] = new Array("Müller","Anton","http://www.sternenhimmelstuermer.eu","probe2.png");
datenbank[2] = new Array("Meyer","Werner","http://www.sternenhimmelstuermer.eu","probe3.png");
function db() {
node = document.getElementById("Antwort");
node.appendChild(Tabellenausgabe());
}
function Tabellenausgabe() {
var Tabelle = document.createElement("table");
var Tbody = document.createElement("Tbody");
for (var i=0;i<3;i++) {
Reihe = document.createElement("tr");
Zelle = document.createElement("td");
Zelle1 = document.createElement("td");
Zelle2 = document.createElement("td");
ZellenInhalt = document.createTextNode(datenbank[i][0] + ";" + datenbank[i][1] );
ZellenInhalt1 =document.createElement("a"); ZellenInhalt1.setAttribute("href",datenbank[i][2]); ZellenInhalt1.appendChild(document.createTextNode (datenbank[i][1]));
ZellenInhalt2
=document.createElement("IMG");ZellenInhalt2.setAttribute("src",
datenbank[i][3]);
Zelle.appendChild(ZellenInhalt);
Zelle1.appendChild(ZellenInhalt1);
Zelle2.appendChild(ZellenInhalt2);
Reihe.appendChild(Zelle);
Reihe.appendChild(Zelle1);
Reihe.appendChild(Zelle2);
Tbody.appendChild(Reihe);
}
Tabelle.appendChild(Tbody);
Tabelle.setAttribute("border",1);
Tabelle.style.bordercolor = 'red';
Tabelle.style.backgroundColor = 'yellow';
return Tabelle;
}
//--></SCRIPT>
</head>
<body>
<center>
<FORM NAME="datenbankForm">
<div>Ein Kleiner Datenbanktest<div>
<br>
<br>
<div>Druecken Sie den Ergebnisbutton.Alle Daten werden gedruckt.</div>
<INPUT TYPE="BUTTON" onClick="db()" VALUE="Ergebnis">
Antwortfeld: <div ID="Antwort">Hier steht die Antwort</div>
</FORM></center>
</body>
</html>
Hinweis: NoScript von Firefox schlägt erstmal an, aber sie können
die dann angezeigten Links freigeben - Hey, dass ist alles harmlos...
So, die blau markierten Datenbankeinträge sind die Hyperlinks. Der
Sternenhimmelstuermer hat nur einen Verweis auf seine Seite eingetragen
- mehr kennt er leider nicht: datenbank 02 12 und 22 sind also unsere Nummern mit den Hyperlinks.
Für die wird eine neue Zelle angelegt (Zelle1 = document.createElement("td");), in der wir den Hyperlink erstellen:
ZellenInhalt1 =document.createElement("a"); ZellenInhalt1.setAttribute("href",datenbank[i][2]); ZellenInhalt1.appendChild(document.createTextNode (datenbank[i][1]));
Der Zelleninhalt1 ist unsere Zielvariable für den Hyperlink (=document.createElement("a")). Dafür wird als Attribut der href mit der Adress aus der Datenbank (http://www.sternenhimmelstuermer.eu) gebildet. Das i ist der Schleife geschuldet, so dass alle drei Adressen bei jedem Durchlauf ausgegeben werden.
Die meisten werden nun sagen: Dann ist ja alles gut. Ne, ab jetzt kommt
noch eine Hürde. Denn im Augenblick steht da ein unsichtbarer Link, der
ungefähr so aussieht: <td><a href="http://www.sternenhimmelstuermer.eu"></a></td>.
Der Laie wie fortgeschrittene User sieht - da fehlt was...
Richtig, da muss zumindest ein Linktext drin stehen und den bekommt
man, in dem nochmal ein Zelleninhalt als Text übergeben wird - eben ein
Textknoten in Javakauderwelch: ZellenInhalt1.appendChild(document.createTextNode (datenbank[i][1]));
ist jener besagter Textknoten mit dem Vornamen der Datenbank, der nun
als sichtbarer Text angezeigt wird, aber gleichzeitig ein Hyperlink
ist, also steht da nun so in der Art <a href="http://www.sternenhimmelstuermer.eu">Uwe</a> in der Zelle in der ersten Zeile.
Viele User gehen bei vielen Kurzbeschreibungen baden, weil eben ein
klassischer Dreierschritt beim Hyperlink beachtet werden Muss:
1. Definiere eine Variable als Hyperlink ZellenInhalt1 =document.createElement("a");
2. Gebe ihr Als Eigenschaft die Adresse ZellenInhalt1.setAttribute("href",datenbank[i][2]);
3. Schreibe ein Kindobjekt für den Hyperlink in Textform (könnte
genauso ein Bild sein), der dem User als Hyperlinktext angezeigt wird. ZellenInhalt1.appendChild(document.createTextNode (datenbank[i][1]));
Das ist jetzt sehr komplex oder einfach nur eben das DOM.
Des weiteren können Sie so Formularfelder erstellen,
aber das sprengt den einfachen Rahmen, den der Sternenhimmelstuermer
hier setzt. Diese andere englischsprachige Seite erklärt das DOM auch
gut.
Wir fassen zusammen, einen DIV- Container kann man mit DOM mit
Tabellen, Hyperlinks, Bildern und Texten füllen. In den letzten
Abhandlungen und Kapiteln steigerte der Sternenhimmelstuermer die Demos
von einer einfachen Tabelle mit Arrayinhalten (Text), über die
Bildausgabe, bis zur Hyperlinkerstellung das Niveau.
Am Ende gab es nur noch den Hinweis, dass man das auch mit
Formularfeldern in einer Form machen kann. Das Ganze wird über
sogenannte Knotenpunkte an entsprechender Stelle eingehängt. Das ist
erstmal sehr schwer, da die Syntax von der normalen HTML-Erstellung
eben abweicht.
Aber - ob Sie es glauben oder nicht, haben Sie die letzten
Abhandlungen im Fluss gelesen, so haben Sie das Modell zu 80 %
verinnerlicht.
Das Impressum dieser
Seite finden Sie hier.