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
Tabellen

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().

Funktion	Beschreibung
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