Bildschirmausgaben mit Javascript

Die Aufgaben 1-4 gehören für Anfänger zum Pflichtprogramm. Die Aufgabe 5 ist die Kür für Fortgeschrittene und kann zu einem späteren Zeitpunkt bearbeitet werden.

Aufgabe 1 - Verständnisfragen

  1. Welche Möglichkeiten hat man für einfache Textausgaben in Javascript (z.B. Warnhinweis oder in die Seite schreiben)? Wie lauten die entsprechenden Anweisungen?
  2. Welche Möglichkeiten hat man für „schöne“ Textausgaben (z. B. Text in ein <div>-Tag zu schreiben)? Was muss man dafür tun, damit das funktioniert?
  3. ...

Aufgabe 2 - alert:

Schreiben Sie ein "Hallo Welt"-Programm zum Testen Ihrer Javascript-Entwicklungsumgebung!
Geben Sie "Hallo Welt" mit einer alert-Anweisung auf dem Bildschirm aus!
  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 in HTML ausgegeben wurde!
    • 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?

Aufgabe 3 - document.write:

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 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?

Aufgabe 4 - Quiz

Nr.
Lösung A
Lösung B
Lösung C
Richtige Antwort?

Wie schreibt man in Javascript einen Warnhinweis?


1
document.advice("Warnung!");
alert("Geht nicht!");
warn("kritisch!");


Wie schreibt man in Javascript eine einfache Textausgabe?


2
document.output("Text");
document.write(Text)
document.write("Text");


Welche Möglichkeit nutzt man in Javascript für Textausgaben in die angezeigte HTML-Seite?


3
<div id="ausgabe"></div>
document.getElementById("ausgabe").innerHTML ="Schön!"
document.beautiful("Schön!");
document.element(body).html="Schön!"

4
...




Aufgabe 5 - innerHTML:

Schreiben Sie Schreiben Sie ein "Hallo Welt"-Programm zum Testen Ihrer Javascript-Entwicklungsumgebung unter Nutzung von innerHTML!
  1. Schnappen Sie sich Ihre beste HTML-Vorlage und bauen Sie das innerHTML dort so ein, dass beim Laden der Seite "Hallo Welt" in einen Absatz ausgegeben wird (z.B. <div id="ausgabe"> </div>)!
  2. Der Text "Hallo Welt" soll erst dann erscheinen, wenn zuvor die Überschrift ausgegeben wurde!
  3. Zentrieren Sie den Absatz horizontal und vertikal auf der Seite! (CSS)
  4. Verwenden Sie eine farbige Sans-Serif-Schrift und einen farbigen Hintergrund für den Absatz! (CSS)

Aufgabe 6 - innerHTML:

A) Studieren Sie den folgenden Quelltext. Notieren Sie, was beim Laden der Seite nacheinander zu sehen ist!
<!DOCTYPE html>
 
<html>
 
<head>
 
  <title>Bildschirmausgaben</title>
  <meta charset="UTF-8">
 
  <style>
 
    #ausgabe
    {
      heigth:           100px;
      width:            100px;
      background-color: yellow;
    }
 
  </style>
 
  <script>
    alert("Test: Eins");
  </script>
 
  <script>
 
    getElementById("ausgabe").innerHTML = "Diese Ausgabe erscheint nicht!"
                                        + " Warum nicht?";
    alert("Diese Ausgabe erscheint auch nicht! Warum nicht?")
 
  </script>
 
</head>
 
 
<body>
 
  <h1>Bildschirmausgaben</h1>
 
  <script>
    alert("Test: Zwei");
  </script>
 
  <div id="ausgabe">Hier stehen alle künftigen Ausgaben!</div>
 
  <script>
    alert("Test: Drei");
 
    document.getElementById("ausgabe").innerHTML="Super. Es geht!";
 
    alert("Test: Vier");
  </script>
 
</body>
 
</html>
 
B) Speichern Sie den Quelltext und führen Sie das Programm aus! Vergleichen Sie den Programmablauf mit Ihren Notizen!

Aufgabe 7 - In welchem Browser läuft mein Script?

a) Geben Sie die Bezeichnung Ihres Browsers aus! Mit der folgenden Anweisung schreibt der genutzte Browser seine genaue Bezeichnung in die Variable browser.
var browser = navigator.userAgent;
b) (Nicht für Anfänger!)
Reagieren Sie mit der Ausgabe "falscher Browser", wenn nicht der von Ihnen zum Testen genutzte Browser zur Ausführung Ihres Scripts genutzt wird.
Tipp: Siehe Verzweigung (if/else)