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.


Impressum
Datenschutz