 |
Ausgabe in ein alert-Fenster Die einfachste Art der Ausgabe, die sich speziell auch fürdie Testphase empfiehlt, ist mit einem Hinweisfenster zu erreichen,das auf dem Bildschirm erscheint und mit einem Mausklick wiedergeschlossen werden muß. Es handelt sich eigentlich umeine Methode des Objektes "Window" die aber ausnahmsweiseohne Angabe des Mutterobjektes funktioniert. Also wie gehtes? 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
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:
- \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∓nbsp;
<input type=radio name="dick"
>d∓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 gkeiche 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 fals
(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>
<input type=button value=" Test " onClick="document.forms[4].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.
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 |
|
|
|
DIENSTE
