Galileo Computing < openbook >
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.
Galileo Computing - Professionelle Buecher. Auch fuer Einsteiger.


Kompendium der Informationstechnik
 von Sascha Kersken
EDV-Grundlagen, Programmierung, Mediengestaltung
Buch: Kompendium der Informationstechnik
gp Kapitel 19 JavaScript
  gp 19.1 JavaScript-Einführung
  gp 19.2 JavaScript im HTML-Dokument
    gp 19.2.1 Erstes Beispiel: Ausgabe ins Dokument
  gp 19.3 Formulare und Event-Handler
    gp 19.3.1 Zugriff auf Formulare und ihre Elemente
    gp 19.3.2 Neufassung des Rechners mit einem Formular
    gp 19.3.3 Die Hintergrundfarbe dynamisch ändern
    gp 19.3.4 Formularauswertung
  gp 19.4 Datums- und Uhrzeit-Funktionen
    gp 19.4.1 Datums- und Uhrzeit-Methoden
    gp 19.4.2 Das Timeout – die JavaScript-»Stoppuhr«
    gp 19.4.3 Ein ausführliches Beispiel
  gp 19.5 Manipulation von Bildern
    gp 19.5.1 Erstes Beispiel: Austauschen eines Bildes auf Knopfdruck
    gp 19.5.2 Vorausladen von Bildern
    gp 19.5.3 Eine gut funktionierende Rollover-Lösung
    gp 19.5.4 Weitere Beispiele
  gp 19.6 Browser- und Fenster-Optionen
    gp 19.6.1 Browser-Eigenschaften
    gp 19.6.2 Automatische Hyperlinks – History und Location
  gp 19.7 DHTML und die Objektmodelle der Browser
    gp 19.7.1 W3C-DOM
    gp 19.7.2 Das klassische Internet-Explorer-Modell
    gp 19.7.3 Das klassische Netscape-Modell
    gp 19.7.4 Browserübergreifende Lösungen
  gp 19.8 Zusammenfassung

gp

Prüfungsfragen zu diesem Kapitel (extern)


Galileo Computing

19.2 JavaScript im HTML-Dokument  downtop

JavaScript-Anweisungen werden in der Regel unmittelbar in HTML-Dokumente hineingeschrieben. Sie stehen zwischen den speziellen HTML-Tags <script> und </script>. Das HTML-Tag <script> muss für die Verwendung von JavaScript durch spezielle Attribute angepasst werden, weil es auch noch andere – allerdings selten genutzte – Browser-Skriptsprachen gibt:

<script language="JavaScript" type="text/javascript">

Dabei ist die unterschiedliche Schreibweise von »JavaScript« in den beiden Attributen verbindlich. Im Übrigen ist es erlaubt – und üblich – den eigentlichen JavaScript-Code folgendermaßen zwischen HTML-Kommentare zu setzen:

<script language="JavaScript" type="text/javascript">
<!--
 
   // Hier steht der eigentliche Code
 
// -->
</script>

Dadurch wird verhindert, dass ganz alte Browser, die kein JavaScript verstehen, den Code als normalen Text ausgeben. Beachten Sie bitte den einzeiligen JavaScript-Kommentar // vor dem Ende des HTML-Kommentars -->. Diese Schreibweise ist notwendig, weil sonst versucht würde, --> als JavaScript zu interpretieren – und das ergibt eine Fehlermeldung. Außerdem darf in der Kommentar-Beginn-Zeile <!-- kein JavaScript-Code stehen, da er sonst ignoriert würde.

Head oder Body?

Ob ein solcher Skript-Block im Head oder im Body einer HTML-Seite steht, ist vom jeweiligen Einzelfall abhängig: Allgemeine Initialisierungen und Funktionsdefinitionen stehen im Head, dagegen steht Code, der etwas in das HTML-Dokument selbst ausgibt, im Body.

Wenn Sie bestimmte JavaScript-Codeblöcke in mehreren Dateien benötigen, können Sie sie auch in externe JavaScript-Dateien auslagern und an der passenden Stelle im Dokument importieren. Eine solche Datei erhält die Dateiendung .js und darf nur JavaScript-Code enthalten, kein HTML. Eingebunden wird eine solche Datei mit Hilfe der folgenden Variante des <script>-Tags:

<script language="JavaScript" type="text/javascript" 
src="extern.js"></script>

Statt extern.js müssen Sie die korrekte URL der verknüpften Datei angeben. Innerhalb dieses speziellen Skript-Blocks selbst darf kein JavaScript-Code stehen. Dennoch ist in diesem Fall davon abzuraten, das leere Tag durch den XML-End-Slash abzuschließen, weil ältere Browser damit nicht zurechtkommen und auf dem expliziten </script> bestehen.


Galileo Computing

19.2.1 Erstes Beispiel: Ausgabe ins Dokument  toptop

Das folgende erste Beispiel gibt an einer bestimmten Stelle im Dokument das unvermeidliche »Hallo, Welt!« aus:

<html>
<head>
<title>Das erste JavaScript</title>
</head>
<body>
<h1>JavaScript spricht:</h1>
<script language="JavaScript" type="text/javascript">
<!--
 
   document.write ("Hallo, Welt!");
 
// -->
</script>

Natürlich ist dieses Beispiel vollkommen unnütz; die Ausgabe von statischem Text kann man auch mit reinen HTML-Mitteln erledigen. Die Methode document.write() ist auch eher zur Ausgabe der Werte dynamischer Ausdrücke geeignet als für String-Literale. Beispielsweise führen die beiden folgenden Anweisungen zu einer unterschiedlichen Ausgabe:

document.write ("3 + 5");  // Ausgabe: 3 + 5
document.write (3 + 5);    // Ausgabe: 8

HTML ausgeben

Abgesehen davon ist das Textformat des Dokuments bekanntermaßen HTML. Deshalb kann document.write() nicht nur reinen Text ausgeben, sondern auch HTML-Tags enthalten, die einfach vom Browser interpretiert werden.

Beispielsweise ergibt die Anweisung

document.write ("<h1>Hallo, Welt!</h1>");

die Ausgabe »Hallo, Welt!« als Hauptüberschrift.

Anführungszeichen-Probleme

Ein kleines Problem dabei ist, dass viele HTML-Tags Attribute besitzen, deren Werte in Anführungszeichen stehen. Mitten in einem String, der aufgrund der Logik von document.write() ohnehin in Anführungszeichen steht, funktioniert das nicht:

document.write ("<font color="#FF0000">Rot</font>");

führt zu einer Fehlermeldung: Der erste String ist bei dem Anführungszeichen vor #FF0000 zu Ende; was danach kommt, versteht JavaScript nicht. Wie in anderen Programmiersprachen schafft auch hier die Escape-Sequenz \" Abhilfe:

document.write ("<font color=\"#FF0000\">Rot!</font>");

Hier noch eine Erweiterung des ersten Beispiels: Der Browser soll den Benutzer zuerst nach dessen Namen fragen und anschließend Folgendes ausgeben:

Hallo, Welt!
Hallo, Peter!

prompt( )

Zur Eingabe des Namens wird die Methode prompt() verwendet. Es handelt sich um eine Methode des aktuellen Browserfenster-Objekts window, das in der Regel nicht explizit erwähnt wird. Seine Eigenschaften und Methoden sehen daher wie globale Elemente aus.

prompt() gibt ein Dialogfeld mit einer Eingabeaufforderung, einem Textfeld und einem OK- sowie einem Abbrechen-Button aus. Die Eingabe des Benutzers in das Textfeld ist der Rückgabewert dieser Methode – sie wartet, bis einer der Buttons OK oder Abbrechen gedrückt wurde und gibt dann einen Wert zurück. Bei OK ist es wie bereits erwähnt die Eingabe, bei Abbrechen die leere Referenz null.

Beispiel:

var eingabe = prompt ("Bitte etwas eingeben!", "");

Dies öffnet ein Dialogfeld mit dem Aufforderungstext »Bitte etwas eingeben!« und einem leeren Vorgabewert – das Texteingabefeld ist also »ab Werk« leer (wenn Sie das zweite Argument ganz weglassen, geben bestimmte Internet Explorer-Versionen im Textfeld ein lästiges »Undefined« aus).

Nachdem das Dialogfeld abgearbeitet ist, besitzt der Ausdruck

prompt ("Bitte etwas eingeben!", "")

einen bestimmten Wert. Dieser Wert wird, wie oben zu sehen, der Variablen eingabe zugewiesen. Diese Variable wird – erkennbar an dem (optionalen) Schlüsselwort var – gerade erst neu deklariert.

Das Skript zur persönlichen Begrüßung des Benutzers sieht so aus:

<script language="JavaScript" type="text/javascript">
<!--     var eingabe = 
        prompt ("Bitte Ihren Namen eingeben!", "");
   document.write ("<h1>Hallo, Welt!<br>");
   document.write ("Hallo, " + eingabe + "!</h1>");
//-->
</script>
 

Neu ist hier die Zeile

document.write ("Hallo, " + eingabe + "!</h1>");

String-Verkettung

Die Verkettung von Strings per +-Operator funktioniert genau wie in Java. Die Probleme mit der automatischen Typkonvertierung sind in JavaScript allerdings noch größer, weil es keine typisierten Variablen gibt. Der folgende kleine Addierer verdeutlicht das Problem:

In zwei prompt()-Felder werden zwei Zahlen eingegeben. Anschließend werden diese Zahlen addiert; das Ergebnis wird im Dokument in der Form Zahl1 + Zahl2 = Ergebnis ausgegeben.

Der nahe liegende Ansatz

var z1 = prompt ("Bitte die erste Zahl!", "");
var z2 = prompt ("Bitte die zweite Zahl!", "");
document.write (z1 + " + " + z2 + " = " + z1 + z2);

funktioniert nicht: Da der Browser im obigen Ansatz erst einmal angefangen hat, Strings zu verketten, macht er damit auch bei z1 + z2 weiter – Sie erhalten ein Ergebnis wie 9 + 7 = 97.

Auch die Formulierung

// ... Eingabe wie gehabt
document.write (z1 + " + " + z2 + " = " + (z1 + z2));

schlägt fehl. Und noch nicht einmal dies hier funktioniert:

// ... Eingabe
var ergebnis = z1 + z2;
document.write (z1 + " + " + z2 + " = " + ergebnis);

Das Problem des zweiten und dritten Ansatzes ist, dass Benutzereingaben zunächst immer als Strings betrachtet werden. Deshalb nutzen weder die Klammern noch die separate Variable; die Eingaben haben stets die Werte "9" und "7", statt 9 und 7.

Demzufolge müssen z1 und z2 zuerst explizit in Zahlen umgewandelt werden. Dies geschieht mit Hilfe der globalen Methoden parseInt() beziehungsweise parseFloat().

parseInt( )

parseInt() versucht, aus dem Parameterwert einen Integer zu ermitteln. Die Methode beginnt ganz links und arbeitet sich Zeichen für Zeichen vor. Bei der ersten Nicht-Ziffer bricht sie ab:

parseInt ("3") 
              // Ergebnis: 3
parseInt ("3.99999") 
        // Ergebnis: 3
parseInt ("3MännerImSchnee") // Ergebnis: 3
parseInt ("Die3vonDerTankstelle")
                             // Ergebnis: NaN

NaN steht für »Not a Number« – keine Zahl, wo eine erwartet wurde.

parseFloat( )

parseFloat() versucht dasselbe mit Fließkommazahlen (Floating Point Numbers). Hier ist neben den Ziffern genau ein Dezimalpunkt (.) zulässig:

parseFloat ("3") // Ergebnis: 3. 
parseFloat ("3.99999")     // Ergebnis: 3.99999
parseFloat ("3.1.29")      // Ergebnis: 3.1
parseFloat ("3.0MännerImSchnee") // Ergebnis: 3.0

Die Lösung für die Addierer-Aufgabe lautet daher folgendermaßen:

var z1 = prompt ("Bitte die erste Zahl!", "");
var z2 = prompt ("Bitte die zweite Zahl!", "");
var ergebnis = parseFloat (z1) + parseFloat (z2);
document.write (z1 + " + " + z2 + " = " + ergebnis);
 
/* Alternative für die letzten beiden Zeilen:
   document.write (z1 + " + " + z2 + " = " 
      + (parseFloat (z1) + parseFloat (z2)));    */

Falls Sie im Übrigen subtrahieren, multiplizieren oder dividieren möchten, müssen Sie die explizite Typkonvertierung nicht durchführen – da es diese Operationen nur für Zahlen gibt, werden die Eingaben automatisch umgewandelt.

Ein kleiner Rechner

Als Nächstes folgt ein vollständiger kleiner Rechner. Er verlangt außer den beiden Zahlen noch die Eingabe einer Rechenart. Vor der Durchführung der jeweiligen Berechnung überprüft er, ob die beiden Eingaben überhaupt Zahlen sind. Außerdem soll bei der Division überprüft werden, ob die zweite Zahl ungleich 0 ist.

Falls eine dieser Bedingungen nicht erfüllt ist, soll eine Fehlermeldung erscheinen, ansonsten das Ergebnis.

Die komplette Logik von Kontrollstrukturen – Abfragen, Schleifen und so weiter – ist absolut identisch mit der C-Syntax (und besitzt nicht die Einschränkung der strengen Typüberprüfung, die Java durchführt).

Der vollständige JavaScript-Code für den Rechner steht in Listing 19.1 und sollte vollkommen selbsterklärend sein.

Listing 19.1   Ein einfacher JavaScript-Rechner

var z1 = prompt ("Bitte die erste Zahl!", "");
if (z1 != parseFloat (z1)) {
   document.write ("Keine Zahl!");
} else {
   var z2 = prompt ("Bitte die zweite Zahl!", "");
   if (z2 != parseFloat (z2)) {
      document.write ("Keine Zahl!");
   } else {
      var op = prompt 
        ("Den Operator (+, -, *, /), bitte!", "");
      switch (op) {
         case "+":
            var erg = 
              parseFloat (z1) + parseFloat (z2);
            document.write 
                 (z1 + " + " + z2 + " = " + erg);
            break;
         case "-":
            var erg = z1 - z2;
            document.write 
                 (z1 + " - " + z2 + " = " + erg);
            break;
         case "*":
            var erg = z1 * z2;
            document.write 
                 (z1 + " * " + z2 + " = " + erg);
            break;
         case "/":
            if (z2 == 0) {
               document.write 
                    ("Durch 0 ist verboten!");
            } else {
               var erg = z1 / z2;
               document.write 
                  (z1 + " / " + z2 + " = " + erg);
            }
            break;
         default:
            document.write 
                 ("Ung&uuml;ltiger Operator!");
      }
   }
}

String-Vergleiche Ein wichtiger Unterschied zu anderen Programmiersprachen bezüglich der Operatoren besteht darin, dass Sie in JavaScript die Vergleichsoperatoren nicht nur auf numerische Werte, sondern auch auf Strings anwenden können. Die Frage ist natürlich, wann ein String beispielsweise »kleiner« als ein anderer ist. Die Regeln dafür sind recht einfach: Verglichen wird das erste Zeichen zweier Strings, das sich voneinander unterscheidet – bei »Japan« und »JavaScript« also beispielsweise das dritte. »Kleiner« ist dabei derjenige String, bei dem das verglichene Zeichen weiter vorn im Zeichensatz steht; also gilt "Japan" < "JavaScript". Bei ASCII sind beispielsweise alle Großbuchstaben »kleiner als« jeder Kleinbuchstabe. Außerdem ist ein kürzeres Wort immer »kleiner als« ein längeres, dessen Beginn das kürzere ist: "Java" < "JavaScript".

  

Einstieg in PHP 5

Einstieg in Java

C von A bis Z

Einstieg in C++

Einstieg in Linux

Einstieg in XML

Apache 2




Copyright © Galileo Press GmbH 2004
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press GmbH, Gartenstraße 24, 53229 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de