template

Index :: Javascript :: HTML-Code erzeugen

Mittels document.write() oder document.writeln() kann man an Ort und Stelle Text in die Seite eingefügen. Ausser den reinen Daten werden dabei oft auch HTML-Tags geschrieben.


Interne Formatierungsfunktionen

In Javascript gibt es eine Reihe von Funktionen, die einen String um bestimmte Tags erweitern. Der Aufruf erfolgt mit der üblichen Punktnotation, z.B. txt.bold() oder "blabla".bold().
Durch Verkettung können auch verschachtelte Tag-Ausdrücke erzeugt werden, z.B. txt.bold().italics().

FunktionBeschreibung
bold() Schrift fett
<b> ... </b>
fett
big() Größere Schrift
<big> ... </big>
normal big bigbig
fixed() Teletype-Font
<tt> ... </tt>
Teletype
italics() Schrift kursiv
<i> ... </i>
kursiv
small() Kleinere Schrift
<small> ... </small>
normal small smallsmall
strike() Text durchgestrichen
<strike> ... </strike>
strike
sup() Text hochgestellt
<sup> ... </sup>
normal hoch
fontcolor(Farbe) Schriftfarbe, erwartet als Parameter eine Farbangabe (z.B. '#00FF00' oder einen Farbnamen)
<font color="Farbe"> ... </font>
#80A000 purple darkolivegreen
fontsize(Nummer) Relative Schriftgröße von 1 bis 7 (3 = normal).
<font size="Nummer"> ... </font>
size1 size2 size3 size4
link(Ziel) Verweis, erwartet als Parameter ein Verweisziel.
<a href="Ziel"> ... </a>


Tabellen

Das Array liste soll als Tabellenzeile dargestellt werden. Hier eine mögliche Lösung:
Javascript im Header
var liste = ['alpha', 'beta', 'gamma', 'delta'];
Weiter unten, im BODY, die Tabelle:
<table bgcolor='#A0A0A0' cellspacing='1' cellpadding='2'> <tr bgcolor='#FFFFFF'> <SCRIPT> for (var i=0; i<liste.length; i++) { document.write("<td width='64' align='center'>"+ liste[i] +"</td>"); } </SCRIPT> </tr> </table>
Das Resultat:
alpha beta gamma delta

Um die HTML-formatierte Ausgabe von Daten zu vereinfachen, erstellen wir uns eine Funktion Wrap(), die einen Text in Tags einbettet:
function Wrap(tag, txt) {
  return '<'+ tag +'>'+ txt +'</'+ tag.replace(/s.*/,'') +'>';
}
Im schließenden Tag müssen mittels replace() evtl. übergebene Attribute entfernt werden.

Da Tabellentags im Layout häufiger benötigt werden, könnte man gleich entsprechende Funktionen bauen:
function TABLE(txt) { return Wrap("TABLE bgcolor='#A0A0A0' cellspacing='1' cellpadding='2'", txt); }
function TR(txt) { return Wrap("TR bgcolor='#FFFFFF'", txt); }
function TD(txt) { return Wrap("TD width='64' align='center'", txt); }
function TRTD(txt) { return TR(TD(txt)); }
Zuletzt erweitern wir das Array-Objekt um eine Methode format(), die alle Elemente der Reihe nach HTML-formatiert (d.h. in Tags einbettet) und das Ganze als String zurückliefert.
Damit wir beim Formatieren flexibel bleiben - die Elemente sollen nicht nur in <TD>-Tags, sondern z.B. auch in <P>- oder <BUTTON>-Tags ausgegeben werden können, spendieren wir der format()-Methode einen Parameter fuFormat, in welchem eine beliebige Formatierungsfunktion angegeben werden kann:
Array.prototype.format = function(fuFormat) {
  var n = this.length, s = '';
  for (var i=0; i<n; i++) s += fuFormat(this[i]);
  return s;
}
Nun lassen sich komplette Tabellen mit einer kompakten Anweisung erzeugen:
liste als horizontale Tabelle (Zeile):
<SCRIPT> document.write(TABLE(TR(liste.format(TD)))); </SCRIPT>
Hier noch die Spaltenversion:
liste als vertikale Tabelle (Spalte):
<SCRIPT> document.write(TABLE(liste.format(TRTD))); </SCRIPT>
alpha
beta
gamma
delta

Index :: Javascript


template