vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Woche 1

Tag 6

JavaScript-Praxis

An unserem sechsten Tag soll nun JavaScript-Praxis ganz im Blickfeld stehen. Dies bedeutet, es wird eine ganze Reihe von ausgesuchten Beispielen durchgesprochen, welche diverse Aspekte des Einsatzes von JavaScript zeigen.

Wir zeigen zuerst, wie mit JavaScript ein dynamischer Aufbau von Webseiten erfolgen kann. Dies wird insbesondere dann interessant, wenn in eine Webseite Informationen eingearbeitet werden sollen, die beim Erstellen einer Webseite nicht zur Verfügung stehen oder sich bei jedem Anwender unterscheiden. Anschließend kümmern wir uns um erste Versuche mit Kontrollanweisungen in JavaScript sowie die Programmierung des Browsers aus einer Webseite heraus. Der vierte Abschnitt wird erste Experimente mit dem Zugriff auf die Anwender- Plattform - auch jenseits des Browsers - durchführen.

Dynamischer Aufbau von Webseiten

In vielen Situationen können bei der Erstellung von Webseiten noch nicht alle Tatsachen bekannt sein, die zum vollständigen Anzeigen aller Fakten notwendig wären. Etwa bei einer Datenbankabfrage, wie sie beispielsweise im Rahmen einer Suchmaschine vorkommt. Oder die Integration eines aktuellen Tagesdatums in eine Webseite. Oder die Integration einer Benutzereingabe in die Webseite selbst. JavaScript bietet dazu die Lösung. Über die Anweisung

document.write()

kann eine Webseite dynamisch geschrieben werden. Damit kann man beispielsweise statt einer überall gleich aussehenden Webseite eine für jeden Besucher individuell angepasste Seite generieren. Wir werden auf die Hintergründe noch eingehen. Nur soweit vorab - die Webseite wird beim Aufruf dieser Technik vollständig neu geschrieben. Deshalb steht üblicherweise nichts im Body-Bereich einer solchen Seite, sondern dessen Inhalt wird inklusive aller notwendigen Informationen (auch sämtlicher HTML-Befehle) dynamisch geschrieben. Wenn Sie die nachfolgenden Beispiele durchspielen, wird das sicher klarer. Dabei sollten alle Beispiele der Reihe nach behandelt werden, da die Erklärungen teils aufeinander aufbauen.

Beispiel 1:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
var a;
a = prompt("Bitte geben Sie Ihren Namen ein","");
document.write("<HTML>");
document.write("<BODY bgcolor=green text=yellow>");
document.write("<H1 align=center>Willkommen</H1>");
document.write("<P align=center>");
document.write(a);
document.write("</P>");
document.write("</BODY>");
document.write("</HTML>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen NamenInWebSeite.htm ab und schauen Sie sich die Datei im Browser an. Über prompt() wird beim Laden der Seite ein Benutzerdialog angezeigt, in dem der Besucher eine Eingabe vornehmen kann. Diese Eingabe wird in einer Variablen zwischengespeichert und dann bei der dynamischen Erzeugung der Webseite verwendet. Beachten Sie, dass das gesamte Grundgerüst der Seite wieder vollständig neu geschrieben wird. Sogar mit globalen Farbangaben. Dies bedeutet, nachdem die Eingabe durch den Anwender durchgeführt wurde, werden dynamisch die angegebenen Farben für den Hintergrund und den Text der Webseite umgestellt.

Abbildung 6.1:  Die dynamisch hinzugekommene Information wird in der Webseite verwendet. Außerdem sind die Farben umgestellt

Abbildung 6.2:  Die Anzeige im Navigator beim Laden der Webseite - der Anwender gibt seinen Namen ein

Der Netscape Navigator hat in einigen Versionen ein Problem mit der auf die obige Weise deklarierten Variablen. Und zwar dann, wenn er der Standardbrowser ist, er noch nicht gestartet und die Datei mit Doppelklick geladen wird. Ihm ist beim ersten Laden der Seite die Variable unter Umständen nicht bekannt. Beim erneuten Laden der Seite funktioniert das Script einwandfrei (wie im Internet Explorer bereits beim ersten Laden). Aber auch der Navigator hat kein Problem, wenn er bereits gestartet ist und die Datei dann geladen wird (etwa mit der Maus in das geöffnete Browserfenster gezogen). Bei Verzicht auf das Neuschreiben des Grundgerüstes kommt auch der Navigator mit dem Script in den sonst für ihn kritischen Situationen zurecht. Falls dieses Verhalten auftritt, ist es ein Fehler des Browsers, nicht des Scripts, weshalb nicht auf die Programmierung dieses Beispiels auf diese Art und Weise verzichtet werden soll. Das Problem ist freilich nicht gravierend, da so ohne umgebende Funktion notierte Script-Anweisungen in der Praxis so gut wie gar nicht mehr vorkommen. Überdies tritt die kritische Konstellation beim Laden aus dem Internet sowieso nicht auf, da hier ja kein Doppelklick auf die Webseite den Browser startet. Wir werden nachfolgend dennoch einen einfachen Workaround (eine selbstgestrickte Fehlerbereinigung) für den Netscape-Fehler sehen, der auf der Verwendung von einer JavaScript-Funktion beruht. Damit kommt der Navigator dann auch in der gerade beschriebenen Situation zurecht.

Beispiel 2:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function lade()
{
var a = prompt("Bitte geben Sie Ihren Namen ein","");

document.write("<HTML>");
document.write("<BODY bgcolor=green text=yellow>");
document.write("<H1 align=center>Willkommen</H1>");
document.write("<P align=center>");
document.write(a);
document.write("</P>");
document.write("</BODY>");
document.write("</HTML>");
}
</SCRIPT>
</HEAD>
<BODY onLoad=lade()>
</BODY>
</HTML>

Beispiel 3:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var a = 42;
var b = 5;
var c;
c=a+b;
document.write(c);
document.write("<br>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen Addition.htm ab und schauen Sie sich die Datei im Browser an. Das Beispiel kommt ganz ohne Interaktion mit dem Anwender aus, addiert einfach zwei Variablen und gibt das Ergebnis dann aus. Das Beispiel zeigt, wie Grundrechenarten mit JavaScript verwendet werden können.

Beispiel 4:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var a;
a = prompt("Geben Sie bitte eine Zahl ein","");
document.write("Das Quadrat von ", a , " ist ", a*a);
document.write("<br>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen Quadrat.htm ab und schauen Sie sich die Datei im Browser an. Über prompt() wird beim Laden der Seite wieder ein Benutzerdialog angezeigt, in dem Sie eine Eingabe vornehmen können. Diese Eingabe wird wie im ersten Beispiel in einer Variablen zwischengespeichert und dann bei der dynamischen Erzeugung der Webseite verwendet. Beachten Sie, dass wir diesmal auf die Generierung des Grundgerüstes der Seite verzichtet haben. Dennoch funktioniert der dynamische Neuaufbau der Seite. Es greift das Prinzip der Fehlertoleranz, sprich der Browser »denkt sich die fehlenden Anweisungen hinzu«. Insbesondere treten hier auch die Probleme mit dem Netscape Navigator nicht auf.

Abbildung 6.3:  Die dynamisch hinzugekommene Information wird in der Webseite verwendet

Abbildung 6.4:  Die Anzeige im Navigator beim Laden der Webseite. Der Anwender gibt eine Zahl ein

Das Beispiel zeigt, wie man mit JavaScript rechnen kann. JavaScript hat weitgehend nur die Grundrechenarten direkt integriert (von vorgefertigten Funktionen abgesehen), aber man kann jede gewünschte mathematische Funktionalität nachprogrammieren. Hier ist es die Quardratberechnung.

Beachten Sie, dass das Beispiel nicht gegen Falscheingaben - etwa Text - geschützt ist.

Kontrollstrukturen

Ein wesentliches Kriterium, weshalb HTML keine Programmiersprache sein kann, ist das Fehlen von Kontrollstrukturen, um den Programmfluss zu steuern. Schauen wir uns in der Praxis mit JavaScript an, was das bedeutet.

Beispiel 5:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var temp=prompt("Eingabe der Temperatur","");
if(temp > 15)
{
document.write("Es ist warm genug.");
}
else
{
document.write("Es ist zu kalt.");
}
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen Entscheidung.htm ab und schauen Sie sich die Datei im Browser an. Über prompt() wird beim Laden der Seite wieder ein Benutzerdialog angezeigt, in dem Sie eine Eingabe vornehmen können (möglichst eine Zahl - das Beispiel reagiert bei Text nicht sinnvoll). Diese Eingabe wird wie im ersten und dritten Beispiel in einer Variablen zwischengespeichert und dann bei der dynamischen Erzeugung der Webseite verwendet. Das Beispiel verwendet das erste Mal eine Entscheidungsstruktur (die if-Schleife), mit der man in einem Script unterschiedlich auf verschiedene Situationen reagieren kann.

Beachten Sie, dass auch dieses Beispiel nicht gegen Falscheingaben - etwa Text - geschützt ist.

Abbildung 6.5:  Entscheidung für die andere Variante (hier am Beispiel der Eingabe »10«).

Abbildung 6.6:  Entscheidung für die eine Variante

Abbildung 6.7:  Die Anzeige diesmal im Internet Explorer beim Laden der Webseite. Der Anwender gibt eine Zahl ein

Beispiel 6:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function lade()
{
var zaehler=0;
var anzahl = prompt("Anzahl Leerzeilen","");
document.write("<H1>Willkommen</H1>");
while(zaehler<anzahl)
{
document.write("<br>");
zaehler++;
}
document.write("<H3>Nächster Text</H3>");
}
</SCRIPT>
</HEAD>
<BODY onLoad="lade()">
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen DynamischeSeite.html ab und schauen Sie sich die Datei im Browser an. Das Beispiel demonstriert, wie ein Anwender vor dem Aufbau der Seite darauf Einfluss nehmen kann, wie die Seite überhaupt aussieht. Dabei ist für uns von Bedeutung, dass die von dem Anwender eingegebene Zahl in einer Kontrollstruktur (die while-Schleife) verwendet wird. So oft wie dort angegeben, wird ein Zeilenvorschub in die Webseite geschrieben. Neu ist, dass hier mit zwei Variablen gearbeitet wird. Eine nimmt die Anwendereingabe entgegen, die andere zählt mit, wie viele Zeilenvorschübe bereits durchgeführt wurden. Wenn die Anwendereingabe erreicht wird, bricht die Schleife ab.

Besondere Beachtung sollte dem Ausdruck

zaehler++;

gelten. Die Zeichenkette ++ ist ein Operator, der den Wert einer Variablen um eins erhöht. Aber dieser Operator ist so noch nicht vollständig beschrieben. Wir kommen darauf noch detaillierter zurück.

Abbildung 6.8:  Der Abstand ist bei der Eingabe »8« groß

Abbildung 6.9:  Der Abstand ist bei der Eingabe »1« klein

Beachten Sie, dass auch dieses Beispiel nicht gegen Falscheingaben - etwa Text - geschützt ist.

Beispiel 7:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
var zahl=prompt("Geben Sie eine Zahl ein","");
var zaehler=1;
var ergebnis=1;
while(zaehler <= zahl)
{
ergebnis=ergebnis * zaehler;
zaehler++;
}
document.write("Der Wert ist ",ergebnis);
document.write("<br>");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen Fakultaet.html ab und schauen Sie sich die Datei im Browser an. Das Beispiel demonstriert eine weitere Verwendung der Kontrollstruktur while. Der Anwender gibt wieder eine Zahl ein und mittels der while-Schleife wird deren Fakultät errechnet (die Fakultät ist das Produkt aller Zahlen bis zur eingegebenen Zahl - z.B. 6! = 1 * 2 * 3 * 4 * 5 * 6 = 720). Wenn die Anwendereingabe erreicht wird, bricht die Schleife ab und das Ergebnis wird angezeigt.

Beachten Sie, dass auch das Beispiel nicht gegen Falscheingaben - etwa Text - geschützt ist.

Abbildung 6.10:  Ausgabe des Ergebnisses (Eingabe »6«)

Abbildung 6.11:  Die Eingabe über prompt()

Zugriff auf den Browser

Mit JavaScript kann man recht einfach auf den Browser des Anwenders zugreifen und ihn beeinflussen. Die nachfolgenden zwei Beispiele werden einmal eine Weiterleitung auf eine Folgeseite und den Zugriff auf die Statuszeile des Browsers zeigen.

Beispiel 8:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function fenster_neu()
{
location.href='Addition.HTM'
}
window.setTimeout('fenster_neu()',3000);
</SCRIPT>
</HEAD>
<BODY>
<H1 align=center>Herzlich Willkommen</H1>
<P align=center>
Sie werden in wenigen Sekunden auf eine Folgeseite weitergeleitet.
</P>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen Weiterleitung.html ab und schauen Sie sich die Datei im Browser an. Das Beispiel demonstriert eine Weiterleitung von einer Seite auf eine Folgeseite per JavaScript (in diesem Fall auf die Seite Addition.htm, die Sie ja als vorheriges Beispiel noch zur Verfügung haben sollten). Die Weiterleitung erfolgt nach ca. drei Sekunden. Diese Weiterleitung ist eine Alternative zu der Weiterleitung per <META>-Tag, wie wir es an Tag 3 gesehen haben.

Beispiel 9:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function zeigeStatus()
{
window.status="Da gibt es ganz viel zu sehen!"
}
</SCRIPT>
</HEAD>
<BODY onLoad="zeigeStatus()">
<H1 align=center>
Herzlich Willkommen
</H1>
<H2 align=center>
Schauen Sie mal in die Statuszeile.
</H2>
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen status.htm ab und schauen Sie sich die Datei im Browser an. Das Beispiel demonstriert, wie auf Teile des Browsers selbst (in diesem Fall die Statuszeile) zugegriffen werden kann.

Abbildung 6.12:  Beachten Sie die Statuszeile

Zugriff auf die Besucherplattform

Mit JavaScript kann man innerhalb eng gefasster Grenzen auch jenseits des Browsers auf den Rechner des Anwenders zugreifen. Die engen Grenzen bedeuten, es lassen sich nur wenige ausgewählte Dinge tun. Insbesondere kann man - bis auf wenige Ausnahmen, etwa Cookies - nur Informationen abfragen, nicht Werte setzen. Diese Begrenzung erscheint vielleicht auf den ersten Blick als Einschränkung, ist aber genau das Gegenteil.

Wie sollte sich eine Technik durchsetzen, die auf dem Rechner des Anwenders weitergehende Manipulationsmöglichkeiten hat? Der Anwender muss ja eine Aktivität auf seinem Rechner akzeptieren, die jemand Fremdes programmiert und auf seinen Rechner geschickt hat. Nur wenn die verwendete Technik bereits so sicher ist, dass keine schädliche Aktion möglich ist, wird diese Technik von der breiten Masse auch akzeptiert. Das Beispiel VBScript in Verbindung mit ActiveX-Controls zeigt ja, was eine zu weit getriebene Leistungsfähigkeit bewirkten kann. Kaum ein Anwender akzeptiert diese Technik und wer es dennoch wagt, ist selbst schuld ;-). Die nachfolgenden zwei Beispiele werden einmal das Systemdatum der Plattform abfragen und in die dynamische Generierung der Webseite einarbeiten (ein kleiner Trick, um dem Anwender ein Topaktualität einer Homepage zu suggerieren - auch wenn sich die Seite seit Ewigkeiten nicht verändert hat ;-)). Das zweite Beispiel fragt die Auflösung des Bildschirms beim Anwender ab. Dies kann man für weitergehende Aktionen verwenden (das machen wir an späterer Stelle) - wir wollen hier diese Informationen nur anzeigen.

Beispiel 10:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function schreibeSeite()
{
var datum = new Date();
var tag = datum.getDate();
if(tag<10)
{
tag="0" + tag;
}
var monat = datum.getMonth() + 1;
if(monat<10)
{
monat="0" + monat;
}
var jahr = 2000 + (datum.getYear()%100);
document.write("<HTML>");
document.write("<BODY bgcolor=blue text=white>");
document.write(
"<H1 align=center>Herzlich Willkommen</H1>");
document.write("<H3 align=center>bei</H3>");
document.write("<H1 align=center>Strom & Schlag</H1>");
document.write("<H4 align=center>
Ihr Elektriker um die Ecke.</H4>");
document.write("<FONT size=4>");
document.write("<P align=right>");
document.write("Aktueller Stand: ");
document.write(tag);
document.write('.');
document.write(monat);
document.write('.');
document.write(jahr);
document.write("</P>");
document.write("</FONT>");
document.write("</BODY>");
document.write("</HTML>");
}
</SCRIPT>
</HEAD>
<BODY onLoad="schreibeSeite()">
</BODY>
</HTML>

Speichern Sie den Text bitte unter dem Dateinamen Tagesdatum.htm ab und schauen Sie sich die Datei im Browser an. Setzen Sie das Tagesdatum auf einen neuen Wert und laden Sie die Datei neu. Das Beispiel verwendet ein Datums-Objekt (Date), in welchem u.a. das Tagesdatum gespeichert ist. Die Information liegt jedoch noch nicht in einer solchen Form vor, dass man sie direkt verwenden kann (zumindest nicht, wenn man das in Westeuropa übliche Format darstellen will). Deshalb wird das Datum noch über verschiedene Schritte aufbereitet.

Abbildung 6.13:  Die Illusion von Tagesaktualität

Beispiel 11:

Geben Sie im Editor den nachfolgenden Quelltext ein:

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function frageBildschirmAb()
{
alert("Ihre Bildschirmauflösung ist " +
  screen.width +
  " x " +
  screen.height +
  ".");
}
</SCRIPT>
</HEAD>
<BODY onLoad="frageBildschirmAb()">
</BODY>
</HTML>

Abbildung 6.14:  Auflösung 2

Abbildung 6.15:  Auflösung 1

Speichern Sie den Text bitte unter dem Dateinamen Bildschirm.htm ab und schauen Sie sich die Datei im Browser an. Verändern Sie die Bildschirmauflösung und laden Sie die Datei neu. Das Beispiel verwendet ein Bildschirm-Objekt (screen), in welchem u.a. die Bildschirmauflösung gespeichert ist.

Zusammenfassung

Der heutige Tagesabschnitt sollte hauptsächlich ein Gefühl für JavaScript vermitteln. Die Beispiele gaben Ihnen die Möglichkeit, an Hand praktischer Situationen die Fähigkeiten von JavaScript auszuloten und vor allem Praxis zu erwerben.

Fragen und Antworten

Frage:
Warum ist in den Beispielen der Body-Bereich leer, wenn eine Seite mit document.write() neu geschrieben wird? Kann da nicht schon etwas drin stehen?

Antwort:
Es können durchaus schon Dinge notiert werden. Aber mit document.write() wird die Webseite vollkommen neu geschrieben. Egal ob da vorher etwas drin steht oder nicht. Am besten stellen Sie sich den Vorgang wie das Schreiben auf einer Tafel vor, die vorher gewischt wird. Sinnvoll ist ein vorheriges Füllen, wenn die Seite nicht beim Laden automatisch geschrieben wird, sondern erst auf Grund einer in der Webseite ausgelösten Aktion.

Frage:
Die Beispiele mit der Fakultät und der Quadratberechnung haben aus Grundrechenarten komplexere Berechnungen nachprogrammiert. Stellt JavaScript für komplexere mathematische Berechnungen keine eigenen Anweisungen bereit?

Antwort:
Doch. JavaScript beinhaltet einige leistungsfähige mathematische Funktionen und vor allem das Objekt Math, das diverse mathematische Methoden bereitstellt.

Frage:
Über prompt() wird beim Laden der Seite ja ein Benutzerdialog angezeigt, in dem ein Anwender eine Eingabe vornehmen kann. Gibt es noch weitere Möglichkeiten, etwa mit mehreren Schaltflächen?

Antwort:
Ja, aber nicht so viele, wie sie beispielsweise unter Windows möglich sind. Das ist ein Preis der Plattformneutralität.

Frage:
Es wurden in den Beispielen zwei Kontrollstrukturen verwendet. Sind das alle unter JavaScript vorhandenen Möglichkeiten?

Antwort:
Nein. Wir werden im Laufe des Buches noch andere kennen lernen.

Frage:
Kann man mit HTML dynamische Informationen in eine Webseite integrieren?

Antwort:
Nein. Dazu braucht man aktive Anweisungen, Kontrollstrukturen und Variablen. Mit all dem kann HTML nicht dienen. Gerade diese fehlenden Elemente waren entscheidende Argumente zur Entwicklung von JavaScript als Ergänzung von HTML.

Workshop

Dieser Tagesabschnitt bestand aus viel Praxis, weshalb wir den Workshop heute im Wesentlichen auf die Modifikation der Beispiele ausrichten wollen. Dafür ist natürlich Voraussetzung, dass Sie alle Beispiele wirklich programmiert haben. Dann sollten Sie noch einmal folgende weitere Dinge ausprobieren:

Kontrollfragen

Im Anhang »Antworten zu den Kontrollfragen« finden Sie die Antworten zu den jeweils am Ende einer Lektion notierten Fragen.

  1. Was macht ++?
  2. Was macht prompt()?
  3. Was heißt if-else übersetzt?
  4. Warum schreibt man überhaupt über JavaScript Webseiten dynamisch?
  5. Was macht alert()?
  6. Kann man über JavaScript Dinge wie die Bildschirmauflösung auf der Plattform des Anwenders abfragen?
  7. Kann man über JavaScript Dinge wie die Farbauflösung auf der Plattform des Anwenders verändern?


vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH