Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
Vorwort
1 Einführung
2 Mathematische und technische Grundlagen
3 Hardware
4 Netzwerkgrundlagen
5 Betriebssystemgrundlagen
6 Windows
7 Linux
8 Mac OS X
9 Grundlagen der Programmierung
10 Konzepte der Programmierung
11 Software-Engineering
12 Datenbanken
13 Server für Webanwendungen
14 Weitere Internet-Serverdienste
15 XML
16 Weitere Datei- und Datenformate
17 Webseitenerstellung mit (X)HTML und CSS
18 Webserveranwendungen
19 JavaScript und Ajax
20 Computer- und Netzwerksicherheit
A Glossar
B Zweisprachige Wortliste
C Kommentiertes Literatur- und Linkverzeichnis
Stichwort

Jetzt Buch bestellen
Ihre Meinung?

Spacer
IT-Handbuch für Fachinformatiker von Sascha Kersken
Der Ausbildungsbegleiter
Buch: IT-Handbuch für Fachinformatiker

IT-Handbuch für Fachinformatiker
Rheinwerk Computing
1216 S., 6., aktualisierte und erweiterte Auflage, geb.
34,90 Euro, ISBN 978-3-8362-2234-1
Pfeil 19 JavaScript und Ajax
Pfeil 19.1 JavaScript
Pfeil 19.2 JavaScript im HTML-Dokument
Pfeil 19.2.1 Erstes Beispiel: Ausgabe ins Dokument
Pfeil 19.3 Formulare und Event Handler
Pfeil 19.3.1 Erstes Beispiel
Pfeil 19.3.2 Zugriff auf Formulare und ihre Elemente
Pfeil 19.4 Datums- und Uhrzeit-Funktionen
Pfeil 19.4.1 Datums- und Uhrzeit-Methoden
Pfeil 19.4.2 Timeout – die JavaScript-»Stoppuhr«
Pfeil 19.5 Manipulation von Bildern
Pfeil 19.5.1 Erstes Beispiel: Austauschen eines Bildes auf Knopfdruck
Pfeil 19.5.2 Vorausladen von Bildern
Pfeil 19.5.3 Eine gut funktionierende Rollover-Lösung
Pfeil 19.6 Browser- und Fensteroptionen
Pfeil 19.6.1 Browser-Eigenschaften
Pfeil 19.6.2 Automatische Hyperlinks – History und Location
Pfeil 19.6.3 Neue Browserfenster öffnen
Pfeil 19.7 DHTML und DOM
Pfeil 19.7.1 W3C-DOM im Überblick
Pfeil 19.7.2 Eine DOM-Baum-Anzeige
Pfeil 19.7.3 DOM-Anwendung in der Praxis
Pfeil 19.7.4 Dokumentinhalte verändern und austauschen
Pfeil 19.8 Ajax
Pfeil 19.8.1 Die erste Ajax-Anwendung
Pfeil 19.8.2 Datenaustauschformate: XML und JSON
Pfeil 19.8.3 Größeres Beispiel: eine interaktive Länderliste
Pfeil 19.9 Zusammenfassung

Rheinwerk Computing - Zum Seitenanfang

19.2 JavaScript im HTML-DokumentZur nächsten Überschrift

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 type="text/javascript" language="JavaScript">

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:

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

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.


Rheinwerk Computing - Zum Seitenanfang

19.2.1 Erstes Beispiel: Ausgabe ins DokumentZur vorigen Überschrift

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



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

<< zurück




Copyright © Rheinwerk Verlag GmbH 2013
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.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern


  Zum Rheinwerk-Shop
Neuauflage: IT-Handbuch für Fachinformatiker






Neuauflage: IT-Handbuch für Fachinformatiker
Jetzt Buch bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchempfehlungen
Zum Rheinwerk-Shop: Java ist auch eine Insel






 Java ist auch
 eine Insel


Zum Rheinwerk-Shop: Linux Handbuch






 Linux Handbuch


Zum Rheinwerk-Shop: Computer Netzwerke






 Computer Netzwerke


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


Zum Rheinwerk-Shop: Windows 8.1 Pro






 Windows 8.1 Pro


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo