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:
<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.
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 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ü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".
|
|