Text ausgeben
( 131 Bewertungen, 2.70 Punkte von 5 )
Tutorials - Tutorials

Text ausgeben

Ausgabe in ein alert-Fenster

Die einfachste Art der Ausgabe, die sich speziell auch für die Testphase empfiehlt, ist mit einem Hinweisfenster zu erreichen, das auf dem Bildschirm erscheint und mit einem Mausklick wieder geschlossen werden muß. Es handelt sich eigentlich um eine Methode des Objektes "Window" die aber ausnahmsweise ohne Angabe des Mutterobjektes funktioniert. Also wie geht es? Der Grundbefehl lautet:
 
alert("mein anzuzeigender Text");

 Was dieser Befehl bewirkt?

Die Frage, wo man die alert-Zeilen eigentlich hinschreibt, ist offen. Hier sind zwei Möglichkeiten angeboten, zuerst die einfachere aber nicht unbedingt sicherere

<form>
   <input type="button" value="Bitte hier drücken" onclick="javascript:alert('mein anzuzeigender Text');">
</form>

legt den Button an, den wir brauchen, um ein Ereignis auszulösen. Der Mausklick veranlaßt dann das Schreiben der alert-Box. Im Vergleich zum Grundbefehl haben sich hier nur die Anführungsstriche geändert, weil hier sozusagen zweifach geklammert wurde. Ein Problem ist, daß diese Art des Aufrufes nicht mit allen JavaScript-Elementen und, wie sich herausstellt auch nicht mit Netscape6 funktioniert.
Meist ist der <script>-Rahmen sicherer, damit HTML sie nicht als Text interpretiert und anzeigt.

Vollständiger und sicherer der zweite Weg. Es wird im <head> ein <script>-Eintrag vorgenommen. Beim erstmaligen Aufruf eines Scripts muß die 'language' angegeben werden. Dann gibt es eine Funktionsdefinition, hier für "Box()".  Die lernt der Browser kennen, weil sie beim Laden der Seite von der JavaScript-Konsole gelesen wird er führt sie aber nicht aus, weil das noch nicht von ihm verlangt wird. Diese Funktion können wir überall im Dokument benutzen. Dazu braucht es einen Anlaß, den wir mit dem Button, genauer mit seinem onClick-Ereignis schaffen. Erst dann wird Box() aufgerufen und ausgeführt. Genau sieht die Sache also so aus:

Funktionsdefinition im head:
<script language="JavaScript">
   ...
   function Box(){alert("mein anzuzeigender Text");}
   ...
</script>

Formulardefinition für Anlage des Buttons und Funktionsaufruf:
<form>
   <input type=button value="oder auch hier!" onClick="Box()">
</form>

Alert kann Text anzeigen, der auch zusammengestückelt sein kann: "Text1" + "Text2"; es können Funktionen aufgerufen werden, die Strings zurückgeben und Variablenwerte angezeigt werden, dafür ein weiteres Beispiel. Zuvor eine Frage, Sie sind

dick  dünn

Was hier gezeigt wird, ist ein zusammengestückelter Text für die alert-Box, der außer Textbrocken auch noch Funktionsaufrufe ( jetzt.getHours(),jetzt.getMinutes()) und eine Variable (text) enthält. Der Aufruf wird in Prinzip lauten:

jetzt=new Date();
text = "irgendwas...";
...
alert("Es ist gerade " + jetzt.getHours() + " Uhr " + jetzt.getMinutes() + "\n" + text);
Notwendige Erläuterungen:
  • zur ersten Zeile begucken Sie bitte die Seite zum Objekt Date
  • \n bewirkt den Zeilenumbruch, vgl. dazu Textformatierung
Auch hier soll der ganze programmtechnische Hintergrund gezeigt werde, er ist komplizierter als im obigen Beispiel, weil wir hier Ihr Körpergewicht als Variable benutzen.
Zunächst wird wieder die Funktion definiert. Die Zeile, die den Text bestimmt, enthält eine Auswahlstruktur, deren geklammerte Bedingung auf die Element "dick" des Formulars "koerper" zugreift. Danach steht für die alert-Box der anzuzeigende Text fest.
 
Funktionsdefinition im head:
<script language="JavaScript">
   ...
   function Zeit()
      {
      var text=(document.koerper.dick[0].checked!=true)?"Zeit, etwas zu essen!":"Zeit, etwas Sport zu treiben!";
      alert("Es ist gerade " + jetzt.getHours() + " Uhr " + jetzt.getMinutes() +"\n" + text);
      }
   ...
</script>

Formulardefinition für Anlage des Buttons und Funktionsaufruf (um Formatierungsinformationen erleichtert):
<form name="koerper">
   <input type=radio name="dick" checked>dick&mp;nbsp;
   <input type=radio name="dick" >d&mp;uuml;nn
   ...
   <table cellspacing="2" cellpadding="5" cols="1" WIDTH="100%" >
   ...
   </table>
   <input type=button value="jetzt hier!" onClick="Zeit()">
</form>

Im unteren Formularteil finden Sie die Definition des Formulars koerper, dei beiden Radiobuttons erhalten gleiche Namen, was sie gegeneinander verriegelt. Intern wird ihr Wert checked=true/false in einem Array des Namens dick verwaltet, also linker Knopf in dick[0] rechter Knopf in dick[1]. Der MausKlick auf die Taste, die keinen Namen braucht, löst die Berabeitung der Funktion Zeit() aus. Alles klar?

Das Bestätigungsfenster confirm

Eine Methode des immer vorhandenen Objektes window (das beim Aufruf nicht genannt werden muß) ist confirm. Es öffnet sich ein Fragefenster, das die Auswahl zwischen "OK" und "Abbruch" anbietet. Da hier die Frage frei formulierbar ist, kann das Fenster auch für Mitteilungen genutzt werden. Abhängig von der zum Schließen gedrückten Taste kann dann unterschiedlich reagiert werden.

confirm("Es ist schon " + jetzt.getHours() + " Uhr " + jetzt.getMinutes() +"\nWillst Du wirklich noch weiter lesen?");

Die unterschiedlichen Antworten können ausgewertet werden, wenn confirm einer Variablen zugewiesen wird. Diese besitzt nach Schließen des Fensters den Wert false (Abbruch) oder den Wert true  (OK). Mehr dazu unter Auswahlstrukturen.
Auch den Aufruf von confirm kann man nicht einfach irgendwo im HTML-Code anbringen. Angenommen man setzte ihn in <script>-Klammern und schriebe ihn an den Dokumentenschluß, würde er immer bei Öffnung des Dokuments sofort ausgeführt. Man sehe bei der alert-Box nach, wie man solches Problem löst.

Ausgabe in Formularelemente

Formular-Elemente sind aus HTML bekannt. Sie können alle mit JavaScript manipuliert werden. Für Ausgaben sind sie eigentlich nicht bestimmt. Allerdings lassen sie sich für diesen Zweck mißbrauchen. Interessant sind dabei die Typen: 'text' und 'textarea'. Die folgenden Regeln des Zugriffs gelten aber auch allgemeiner.
Um ein Formularelement ansprechen zu können, muß es adressierbar sein. Dazu gibt es zwei Möglichkeiten.

  • Mit den Mitteln von HTML kann jedes Fromularelement einen eindeutigen Namen erhalten. Der Aufruf eines Elementes in Javascript erfolgt hierarchisch in der Form: document.Formularname.Elementename
  • In JavaScript werden alle Formulare und ihre Elemente in speziellen Arrays gespeichert. Unabhängig von den Namen kann das erste Formular mit document.form[0], das dritte mit document.form[2]angesprochen werden. Für jedes Formular wird weiterhin ein Array elements[] geführt, in dem die Formularelemente abgelegt sind. Der erste Button im ersten Text dieser Seite über alert-Boxen ist also mit "document.forms[0].elements[0] anzusprechen.
Aufschrift von Formularelementen verändern
Probieren geht über Studieren:
Weil ich keine Geheimnisse haben will, der Aufruf zu diesem Button lautet:
 
<form name="geheimniss">
   <input type=button value=" Test " onClick="document.forms['geheimniss'].elements[0].value='ich bin verändert worden!'">
</form>
Eintrag in einem Textfeld
Anzuzeigender Text ist bei 'text' mit der Eigenschaft 'value' verknüpft. Diese kann allerdings vom Nutzer überschrieben werden, weil dies ja der eigentliche Sinn dieses Formularelements ist. Wie könnte es gehen?
 
<form>
   <input type=text size=30 value="noch nix passiert">
   <input type="button" value="Textausgabe in Textfeld" onClick="document.forms[5].elements[0].value= 'Das muß mal gesagt werden!'">
</form>

Textfeld und Button werden wie üblich angelegt, der Button wertet das Ereignis aus, daß er angeklickt wird. Der neue Text könnte nun von Hand wieder überschrieben und danach einer Variablen zugewiesen werden. Schon das einfache Textfeld eignet sich also für Dialoge zwischen Nutzer und Programm.

Eintrag in ein Textarea

Im Prinzip genauso erfolgt der Zugriff auf <texarea>. Diese ist zwar ein eigenes Tag, das geöffnet und geschlossen werden muß und einen Container für den Text bildet. Aber der Inhalt  heißt wieder value und kann beliebig oft vom Programm geschrieben, vom Nutzer verändert  und vom Programm wieder gelesen werden.
 

<form name="show">
   <textarea name="board" cols=30 rows=10 wrap="virtual"></textarea>
   <input type=button value="Textausgabe in TextArea" onClick="document.show.board.value = goethe">
</form>

Hier wurde dem Formular diesmal ein Name verpaßt, man hätte ohne Schaden auch wieder die interne Zählung, also den auch gültigen Namen forms[5] benutzen können.
Anmerkung: Wenn eine Seite oft bearbeitet wird, besteht bei der Zählung durch nachträglich eingebaute Formulare immer die Gefahr der Zerstörung nachfolgender Bezüge. Deshalb ist in diesem Fall die Namensvergabe natürlich besser!
Ausgewertet wird wieder das onclick-Ereignis des Buttons. Die Zuweisung ohne Anführungsstriche bedeutet, daß goethe nicht etwa ein Dichter, sondern eine String-Variable ist. Der ist im Kopfteil der Text zugewiesen worden. Dazu braucht man das <script>-Tag. Das hätte man zwar zu diesem Zweck auch hier unten einfügen können, aber da im Head schon  ein <script>-Bereich existiert, kann man den gut nutzen.

In die Statusleiste schreiben

Die Statusleiste ist unten auf dem Bildschirm, dort, wo der Browser seine Tätigkeitsberichte absetzt. Sie ist eine Eigenschaft des window-Objekts. Ihr kann direkt ein String zugewiesen werden. Allerdings gilt für sie, was auch für die anderen window-Methoden gilt, sie müssen duch Ereignisse ausgelöst werden, die man selber ermöglichen muß. Bei alert ist gezeigt, wie es geht. Der Aufruf, der in eine Funktion einzubauen ist, lautet:

window.status = "mein Text";

In das Dokument schreiben

Ihre WWW-Seite ist in Javascript das "document". Auf diesem Text zu erzeugen, ist im Prinzip einfach, aber... mal sehen, welche Fälle denkbar sind.

  • Der Text ist schon bekannt, wenn die Seite gebastelt wird. Man kann sich einen Knopf an die Backe nähen und danach in das Manuskript schreiben:
<script language="JavaScript>
   document.write ("Knopf an Backe nähen tut weh.");
</script>.
Jetzt folgt diese Codezeile wirklich ->  <- ...und siehe da, es klappt! Natürlich hätte man den Knopf ebenso wie das Script auch weglassen können und den Text einfach nur eintragen.
  • Der Text wird durch Formulareingaben oder durch Javascript-Funktionen erst zur Zeit der Betrachtung der Seite erzeugt. Jetzt ist JavaScript notwendig. Ein Beispiel:
<script language="JavaScript">
   document.write ("Dieses ist der "+ navigator.appName + "-Browser");
</script>
und was es bewirkt ->  <-

Wenn der Text in eine Liste oder in eine Tabelle geschrieben werden soll, geht das ganz einfach, die sind nämlich auch nur "document". Der ganze Schreibaufruf wird in die betreffende Struktur eingebaut und schon klappt es (vielleicht).

  • Man muß sich nicht auf Text beschränken. Auch HTML-Code kann in das Dokument geschrieben werden und sogleich ausgeführt werden. Wozu das gut ist? Nun besehen Sie sich die Seite über das Objekt navigator, dort werden in dieser Technik Tabellen angelegt, um von JavaScript erfragte Informationen darzustellen. Der dort schon angegebene Code lautet wie folgt, er wird hier nicht ausgeführt, denn dies dauert eine ganze Weile.
<script language="JavaScript">
   document.writeln("<table cellspacing=2 cellpadding=5 width='100%' bgcolor='#ccffff'>");
   for(i=0; i<navigator.mimeTypes.length; i++)
   {
      document.writeln("<tr>"); 
      document.writeln("<td>" + navigator.mimeTypes[i].type.fontsize(2) + "</td>");
      document.writeln("<td>" + navigator.mimeTypes[i].suffixes.fontsize(2) + "</td>");
      document.writeln("<td>" + navigator.mimeTypes[i].description.fontsize(2) + "</td>");
      document.writeln("<td>" + navigator.mimeTypes[i].enabledPlugin + "</td>");
      document.writeln("</tr>");
   }
   document.writeln("</table>");
</script>

In ein neues Fenster schreiben

JavaScript bietet die Möglichkeit, neue Fenster auf dem Bildschirm des Nutzers zu öffnen. Bei ihrer Verwendung sollte allerdings an den Nutzer gedacht werden, der sie irgendwann wieder schließen muß. Das kann schnell lästig werden.
Solche Zusatzfenster sind dazu bestimmt, eine zweite HTML-Datei anzuzeigen. Man findet sie aber auch zur direkten Anzeige von Text. Dies ist allerdings nicht unproblematisch.
Man muß sozusagen ein "freischwebendes HTML-Dokument" erzeugen, in das man den Text hineinschreibt. Das geschieht hier durch Einfügen des <div>-Tags in den Schreibbefehl. Neben dem <div>-Tag funktionieren noch die <hx>-Tags. Keinen Erfolg hatte ich mit <html> oder <body>, was eine gewisse Logik für sich hätte.
Die Variablenübergabe in das neue "Dokument" funktioniert auch (leider) nicht. Wem es gelingt, Variableninhalte des Hauptfensters im Unterfenster anzuzeigen, den bitte ich um Nachricht!
Ein drittes Problem besteht darin, daß bei Fensteröffnung im open-Befehl an zweiter Stelle zwar der Fenstername (hier also "Textausgabe") vergeben wird, für die Textausgabe aus dem Dokument des Mutterfensters heraus aber die Variable (hier "fens1") genutzt werden muß, der das Ergebnis der Open-Methode zugewiesen wurde.
Die Gründe für alle diese Probleme liegen, kurz und mißverständlich ausgedrückt, im ersten Gebot des obersten Objektes von von JavaScript: "ICH bin dein window, ..., du sollst keine anderen windows haben neben mir!"
Die folgende Variante funktioniert in beiden Groß-Browsern.

<script language="JavaScript">
   function fensterchen()
   {
      fens1=window.open("", "Textausgabe","width=300,height=300");
      fens1.document.write("<div>Hier ist mein Text</div>");
   }
</script>
zum Aufruf: 
<form><input type=button value="Test" onClick="fensterchen()"></form>

Drucken

Es gibt eine Methode von window (sowie von frame), die print() heißt und den Druck des gerade angezeigten Fensterinhalts bewirkt. Leider wird dabei die Seite nicht so gedruckt, wie sie auf dem Bildschirm aussieht. Der Bildaufbau gelingt nicht. Abhilfe um vernünftige Ausdrucke zu produzieren: Anlage druckbarer Seiten in einem speziellen Fenster, das dann gedruckt werden kann. Was dort funktioniert, muß ausprobiert werden.

<a href="javascript:window.print()">Diese Seite drucken</a>

Erläuterung: Das Beispiel definiert einen Verweis, mit dessen Hilfe der Anwender die Seite ausdrucken kann.

Formatierung von auszugebenden Texten

Bevor längere Texte an ihre Ziele geschickt werden, müssen sie in irgendeiner Weise mit Steuerzeichen für Formatierung, Umbruch, unzulässige Zeichen etc. versehen werden. Welche Möglichkeiten es gibt, zeigt die folgende Tabelle. Es gibt, aus C entlehnt, sog. Escape-Codes dazu.  Ihre Namen sind weitgehend selbsterklärend. Sie werden einfach in den Text eingefügt.

Escape-Codes
\b Backspace
\f Formfeed = Seitenvorschub
\n New Line = Zeilenumbruch
\r Carriage Return = neue Zeile
\t Tabulator
\' einfaches Anführungszeichen innerhalb eines Strings
\" normales Anführungszeichen innerhalb eines Strings
\\ Backslash innerhalb eines Strings
Dieses Tutorial wurde bereitgestellt von Prof. Dr. Rolf Hirte, Technische Fachhochschule Wildau. Vielen Dank an dieser Stelle!
Viel Spass beim Lernen und beim Erstellen eigener JavaScripts.
Solltet ihr ein nützliches Script entwerfen, von dem ihr meint dass es gut auf diese Seite passen würde, dann sendet es doch einfach ein :-)
 

Login