Bildschirmausgaben mit Javascript


(Diese Seite als Übungsblatt vom 20.10.2013 zum Ausdrucken: Klicken Sie hier.)

Diese Seite beschäftigt sich mit einigen der vielen Möglichkeiten, Texte aus dem Javascript-Programm heraus auf dem Bildschirm auszugeben.

Voraussetzungen für das Verständnis und das Nachvollziehen der folgenden Texte und Aufgaben:
  • Grundlagen HTML
  • Kenntnis des script-Tags
    • <script type="text/javascript">   </script>
  • Verständnis der zeilenweisen Abarbeitung von HTML und Javascript Anweisungen (=sequentielle Abarbeitung bzw. Interpretation)

Hinweis: Das script-Tag dürfen Sie sowohl im Header als auch im Body einer HTML-Datei verwenden - je nachdem, was Sie damit vorhaben!

alert

alert() ist eine Funktion in Javascript mit welcher man Warnhinweise ausgeben kann. Ich benutze alert() hin und wieder zum Testen von Quellcode. Schön an der Funktion alert() ist, dass sie sehr einfach zu benutzen ist.
Sie schreiben z.B. einfach nur

alert("Hallo Welt");
und schon haben Sie eine entsprechende Ausgabe auf dem Bildschirm in einem kleinen Fenster, welches Sie mit OK wieder schließen müssen:
halloweltalert.png

Aufgabe 1:
Schreiben Sie ein "Hallo Welt"-Programm zum Testen Ihrer Javascript-Entwicklungsumgebung!
  1. Schnappen Sie sich Ihre beste HTML-Vorlage und bauen Sie das alert() dort so ein, dass beim Laden der Seite "Hallo Welt" ausgegeben wird!
  2. Das Fenster soll erst dann erscheinen, wenn bereits die Überschrift ausgegeben wurde, so wie es im obigen Beispiel zu sehen ist!
    • Wie bekommt man das hin?
    • Welchen Unterschied macht es, den alert()-Befehl in den Header der Datei oder an das Ende des Bodys der HTML-Datei zu schreiben?

Erfolgreicher Test:
Beim Aufruf Ihrer Seite wird vom Browser ein Ausgabefenster erzeugt mit dem Gruß "Hallo Welt" (siehe Abbildung).

document.write

Der Befehl document.write() fügt Ihre Texte gleich in den HTML-Quelltext ein.
Bei der Verwendung von document.write() ist es also noch wichtiger zu verstehen, an welcher Stelle der ausgegebene Text letztendlich steht.
Sie schreiben z.B. einfach nur

document.write("Hallo Welt");

und schon haben Sie eine entsprechende Ausgabe auf dem Bildschirm in Ihrer HTML-Seite:
halloweltwrite.png

Aufgabe 2:
Schreiben Sie ein "Hallo Welt"-Programm zum Testen Ihrer Javascript-Entwicklungsumgebung unter Nutzung des Befehls document.write()!
  1. Schnappen Sie sich Ihre beste HTML-Vorlage und bauen Sie das document.write() dort so ein, dass beim Laden der Seite "Hallo Welt" in der HTML-Seite ausgegeben wird!
  2. Der Text "Hallo Welt" soll entgegen der obigen Abbildung erst dann erscheinen, wenn bereits die Überschrift ausgegeben wurde!
  • Wie bekommt man das hin?
  • Welchen Unterschied macht es, den document.write()-Befehl in den Header der Datei oder an das Ende des Bodys der HTML-Datei zu schreiben?

Verwendung von CSS in Javascript-Ausgaben

Im style-Tag Ihrer HTML-Seite verwenden Sie z.B folgende Formatierungen für Überschriften:
  h1
  {
    font-size:   2em;
    color:       blue;
  }
  h2
  {
    font-size:   1.5em;
    color:       green;
  }
Im HTML-Text würden diese Formatierungen einfach übernommen werden, sobald ein h1-Tag oder ein h2-Tag benutzt wird.
<h1>große Überschrift</h1>
<h2>kleine Überschrift</h2>
In Javascript werden die selben Formatierungen z.B. wie folgt verwendet:
// Beispiel 1
document.write( "<h1>Überschrift</h1>" );
... oder so ...
// Beispiel 2
var eingabe = prompt("beliebige Eingabe: ");
document.write( "<h2>" + eingabe + "</h2>" );
 

innerHTML

Die Verwendung innerHTML ist eine weitere Ausgabemöglichkeit, welche von Profis bevorzugt wird.
Mit dieser Ausgabemöglichkeit können Sie Texte an beliebige Stellen in die HTML-Seite schreiben.

Wie geht das? So ...
Kleine Wiederholung zu HTML und CSS:
  • Sie fügen in Ihrer HTML-Vorlage im Body einen Absatz mit dem div-Tag hinzu.
  • Eine Id für die Formatierung dieses div-Tags fügen Sie z.B. mit id="ausgabe" dem div-Tag hinzu.
  • Im style-Tag Ihrer Datei ergänzen Sie für die Id #ausgabe die Attribute width und height und eine Hintergrundfarbe für das Ausgabefeld.
  • Jetzt brauchen Sie nur noch in einem Skript einen Text in den Absatz hineinzuschreiben. Das geht wie folgt:
    document.getElementById("ausgabe").innerHTML = "Hallihallo";
Wenn Sie jetzt das so entstandene folgende Programm ausführen, dann sehen Sie, wo das Ausgabefeld in Ihrer HTML-Seite vom Browser plaziert wird.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>innerHTML</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <style type="text/css">
    #ausgabe
    {
      background-color: red;
      width: 100px;
      height: 100px;
    }
  </style>
</head>
 
<body>
    <div id="ausgabe">Alle meine Ausgaben sollen hier stehen!</div>
 
    <script type="text/javascript">
       prompt("Passen Sie auf, was jetzt gleich auf Ihrer Seite passiert!","OK");
       document.getElementById("ausgabe").innerHTML = "Hallihallo";
    </script>
 
</body>
 
</html>
 
 
 
Sie können natürlich auch mehr als eine Ausgabe in Ihrer HTML-Seite realisieren.
 <div id="ausgabe1">
    Lala
  </div>
 
  <div id="ausgabe2">
    <img src="index.jpg">
  </div>
 
  <div id="ausgabe3">
    <a href="http://www.google.de">Google</href>
  </div>
Und es ist völlig egal, was dort als Inhalt bereits steht. Der Inhalt der HTML-Tags mit den IDs #ausgabe1, #ausgabe2 und #ausgabe3 wird bei einer Ausgabe in diese Felder einfach überschrieben und verschwindet :
    document.getElementById("ausgabe1").innerHTML = "nanu";
    document.getElementById("ausgabe2").innerHTML = "nana";
    document.getElementById("ausgabe3").innerHTML = "blabla";
Aneinanderhängen von Texten im Ausgabefeld
Wenn Sie Texte aneinander hängen möchten, so macht man das z.B. wie folgt:
// Retten des alten Textes
var text = document.getElementById("ausgabe").innerHTML;
// und zusammen mit dem neuen in das Feld schreiben
document.getElementById("ausgabe").innerHTML = text + "neuer Text";
 
oder einfacher ( bewirkt das gleiche! ):
document.getElementById("ausgabe").innerHTML
  = document.getElementById("ausgabe").innerHTML + "neuer Text";
oder noch einfacher ( bewirkt ebenfalls das gleiche! ):
document.getElementById("ausgabe").innerHTML += "neuer Text";