19.2 JavaScript im HTML-Dokument
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:
Dabei ist die unterschiedliche Schreibweise von »JavaScript« in den beiden Attributen verbindlich. In neueren Browsern ist die type-Angabe übrigens Pflicht, während das Attribut language inzwischen optional ist. Wenn Sie jedoch immer beide verwenden, sind Sie stets auf der sicheren Seite.
Im Übrigen ist es erlaubt – und üblich – den eigentlichen JavaScript-Code folgendermaßen zwischen HTML-Kommentare zu setzen:
<script type="text/javaccript" 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 den einzeiligen JavaScript-Kommentar // vor dem Ende des HTML-Kommentars -->. Diese Schreibweise ist notwendig, weil sonst versucht würde, die Zeichenfolge --> als JavaScript zu interpretieren, was eine Fehlermeldung ergibt. Außerdem darf in der ersten Kommentarzeile <!-- kein JavaScript-Code stehen, da er sonst ignoriert würde.
Ob ein solcher Skriptblock 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, an der entsprechenden Stelle im Body. Aus Performancegründen wird empfohlen, so viel JavaScript-Code wie möglich ans Ende des Dokuments zu setzen, also in einen oder mehrere <script>-Blöcke vor dem schließenden Body-Tag.
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 mithilfe der folgenden Variante des <script>-Tags:
Statt extern.js müssen Sie die korrekte URL der verknüpften Datei angeben. Innerhalb dieses speziellen Skriptblocks 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.
19.2.1 Erstes Beispiel: Ausgabe ins Dokument
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 können Sie 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 unterschiedlichen Ausgaben:
document.write ("3 + 5"); // Ausgabe: 3 + 5
document.write (3 + 5); // Ausgabe: 8
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.
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 ("<span style="color: #FF0000">Rot</span>");
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 ("<span style=\"color: #FF0000\">Rot!</span>");
Hier noch eine Erweiterung des ersten Beispiels: Der Browser soll den Benutzer zuerst nach dessen Namen fragen und anschließend beispielsweise Folgendes ausgeben:
Hallo, Welt!
Hallo, Peter!
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 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 zuvor 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>");
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 Variablen standardmäßig nicht typisiert sind. 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 naheliegende 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 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 mithilfe der globalen Methoden parseInt() oder parseFloat().
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 ("4.99999") // Ergebnis: 4
parseInt ("5Freunde") // Ergebnis: 5
parseInt ("Pik7") // Ergebnis: NaN
NaN steht für »Not a Number« – keine Zahl, wo eine erwartet wurde.
parseFloat() versucht dasselbe mit Fließkommazahlen. Hier ist neben den Ziffern genau ein Dezimalpunkt (.) zulässig:
parseFloat ("2") // Ergebnis: 2.0
parseFloat ("3.99999") // Ergebnis: 3.99999
parseFloat ("4.1.29") // Ergebnis: 4.1
parseFloat ("5.0Freunde") // Ergebnis: 5.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 nicht addieren, sondern subtrahieren, multiplizieren oder dividieren möchten, brauchen Sie die explizite Typkonvertierung übrigens nicht durchzuführen. Da es diese Operationen nur für Zahlen gibt, werden die Eingaben automatisch umgewandelt.
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".
Ihr Kommentar
Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.
