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.7 DHTML und DOMZur nächsten Überschrift

Als 1998 die 4er-Versionen der beiden damals wichtigsten Browser eingeführt wurden, war das Schlagwort Dynamic HTML (DHTML) eine der Lieblingsvokabeln aller Webdesigner. Für einen Begriff, der gar keine einheitliche Technologie beschreibt, ist das bemerkenswert: Die Bezeichnung DHTML entstand vor über dreizehn Jahren in den Marketingabteilungen von Microsoft und Netscape. Es handelt sich um die Zusammenarbeit zwischen Stylesheets zur Formatierung von HTML-Inhalten und neueren JavaScript-Fähigkeiten.

Insbesondere wurden in den 4er-Browsern zum ersten Mal sogenannte Objektmodelle eingeführt, die es ermöglichen, einen Großteil der Elemente in HTML-Dokumenten anzusprechen und auch nach dem Laden des Dokuments noch dynamisch zu verändern. Die diversen proprietären Modelle sind glücklicherweise veraltet; praxisrelevant ist inzwischen nur noch das Document Object Model (DOM) des W3C. Es ermöglicht konsequent die nachträgliche Änderung jedes beliebigen Elements eines HTML-Dokuments, indem es das Dokument als hierarchisch verschachtelte Baumstruktur versteht. Das DOM ist nicht nur für JavaScript und HTML gedacht, sondern wurde in vielen verschiedenen Programmiersprachen für den Zugriff auf XML-Dokumente aller Art implementiert. In Kapitel 15, »XML«, wird beispielsweise die Verwendung des DOM in Java angesprochen.

DOM wird von folgenden Browsern interpretiert: Internet Explorer ab 5.0, Firefox ab 1.0, Netscape ab 6.0, Mozilla und Opera ab 6.0, Safari ab 1.0.


Rheinwerk Computing - Zum Seitenanfang

19.7.1 W3C-DOM im ÜberblickZur nächsten ÜberschriftZur vorigen Überschrift

Mithilfe von DOM können Sie auf jedes einzelne Element einer Webseite zugreifen. Dazu wird das Objekt als Baummodell aus verschiedenen Arten von Knoten betrachtet. Jeder Knoten kann beliebig viele Kindknoten besitzen. Jeder Knoten besitzt einen der in gezeigten Knotentypen, der über seine Eigenschaft nodeType abgefragt werden kann:

Tabelle 19.1 DOM-Knotentypen für HTML-Dokumente

Knotentyp Bedeutung

1

Element (HTML-Tag)

2

Attribut (funktioniert so nicht!)

3

einfacher Text

8

HTML-Kommentar

9

das Dokument selbst

Es existieren zwei verschiedene Möglichkeiten, auf einen Knoten vom Typ HTML-Tag zuzugreifen:

  • Die Methode
    document.getElementById(ID-String)

    liefert eine Referenz auf das Tag zurück, dem über das Attribut id eine spezielle ID zugewiesen wurde. Beispielsweise können Sie auf einen Absatz, der so definiert wurde:

    <p id="test">Spezieller Absatz, Marke test</p>

    mithilfe dieser DOM-Methode zugreifen:

    document.getElementById("test")
  • Mithilfe der Methode
    document.getElementsByTagName(Tag-String)

    erhalten Sie eine Referenz auf ein Array aller Elemente, die dem angegebenen HTML-Tag entsprechen. Beispielsweise entspricht der folgende Ausdruck dem dritten <p>-Tag einer Seite:

    document.getElementsByTagName("p")[2]

Auf Text- und Kommentarknoten können Sie nicht direkt zugreifen. Sie sind stets Kindknoten der umschließenden HTML-Tags. Auf die Kindknoten eines Elements sowie auf seinen Elternknoten und seine »Geschwister« können Sie mithilfe der in Tabelle 19.2 gezeigten Eigenschaften zugreifen:

Tabelle 19.2 Zugriff auf DOM-Kindknoten

Eigenschaft Bedeutung

Knoten.firstChild

Liefert das erste Kindelement von Knoten.

Knoten.childNodes[]

ein Array aller Kindknoten von Knoten

Knoten.lastChild

Liefert den letzten Kindknoten von Knoten.

Knoten.parentNode

Liefert den übergeordneten Knoten.

Knoten.nextSibling

Liefert den nächsten »Geschwisterknoten«, also den nachfolgenden Kindknoten desselben Elternknotens.

Knoten.previousSibling

Liefert den vorigen »Geschwisterknoten«.

Knoten.hasChildNodes()

Diese Methode liefert true, wenn Knoten Kindelemente besitzt, ansonsten false.

HTML-Tag-Knoten besitzen die Eigenschaft nodeName, die den Namen des eigentlichen HTML-Tags enthält. Text- und Kommentarknoten weisen dagegen die Eigenschaft nodeValue auf, die den Textinhalt enthält. nodeValue liefert möglicherweise etwas anderes zurück, als Sie erwarten. Betrachten Sie beispielsweise den folgenden Auszug aus dem Body eines HTML-Dokuments:

<p id="test">Dies ist der <i>alte</i> Text.</p>
<script language="JavaScript" type="text/javascript">
<!--

alert (document.getElementById ("test")
.firstChild.nodeValue);

//-->
</script>

Die alert()-Anweisung greift zunächst über die Methode getElementById() auf den Absatz mit der ID test zu. Anschließend liest sie per nodeValue den Textinhalt des ersten Kindknotens (firstChild) des aktuellen Elements. Vielleicht überrascht es Sie, zu hören, dass das Ergebnis nicht so lautet:

Dies ist der alte Text

Vielmehr bekommen Sie lediglich Folgendes zu sehen:

Dies ist der

Der Text »Dies ist der« bildet den ersten Kindknoten des Absatzes, das HTML-Tag <i>...</i> ist der zweite und der restliche »Text« der letzte.

Das nächste Beispiel verwendet einige dieser Methoden und Eigenschaften zur Anzeige der aktuellen Uhrzeit im Fließtext eines Absatzes. Der Absatz selbst wird so definiert:

<p id="uhr">Uhrzeit</p>

Im Head steht folgende Funktion, die im <body>-Tag im Event Handler onload aufgerufen werden sollte:

function zeit ()  {
var jetzt = new Date();
var std = jetzt.getHours();
var min = jetzt.getMinutes();
var sek = jetzt.getSeconds();
var zeitangabe = std < 10 ? "0" : "";
zeitangabe += std + ":";
zeitangabe += min < 10 ? "0" : "";
zeitangabe += min + ":";
zeitangabe += sek < 10 ? "0" : "";
zeitangabe += sek;
document.getElementById ("uhr").firstChild.
nodeValue = "Es ist " + zeitangabe + " Uhr";
setTimeout ("zeit();", 1000);
}

Das Thema Datums- und Uhrzeitanzeige wurde bereits in diesem Kapitel behandelt. Neu ist hier lediglich die Zeile

document.getElementById ("uhr").firstChild.
nodeValue = "Es ist " + zeitangabe + " Uhr";

Über getElementById() wird der Absatz mit der ID uhr angesprochen. Dessen erster Kindknoten firstChild ist der Absatztext, der mithilfe einer Wertzuweisung an seine Eigenschaft nodeValue geändert wird.


Rheinwerk Computing - Zum Seitenanfang

19.7.2 Eine DOM-Baum-AnzeigeZur nächsten ÜberschriftZur vorigen Überschrift

Das folgende Beispiel durchwandert rekursiv den DOM-Baum des aktuellen Dokuments und gibt in einem separaten Fenster Informationen über alle Knoten aus, die es dabei findet. Abbildung 1.1 zeigt das Skript bei der Arbeit.

Hier zunächst der Quellcode des gesamten HTML-Dokuments:

<html>
<head>
<title>DOM-Baumdiagramm</title>
<script language="JavaScript" type="text/javascript">
<!--

var infofenster;

function initDOMTree() {
infofenster =
open("", "", "width=400,height=400");
showDOMTree(document, 0);
}

function showDOMTree(knoten, indentation) {
var typ = knoten.nodeType;
var typtext, info;
switch (typ) {
case 1:
typtext = "HTML-Tag";
info = knoten.nodeName;
break;
case 3:
typtext = "Text";
info = knoten.nodeValue;
break;


case 8:
typtext = "Kommentar";
info = knoten.nodeValue;
break;
case 9:
typtext = "Dokument";
info = "Das ganze HTML-Dokument";
break;
default:
typtext = "Anderer Typ";
info = "XML-Dokument?";
}
// Einrücken
for (var i = 0; i < indentation; i++) {
infofenster.document.write
("&nbsp;&nbsp;&nbsp;&nbsp;");
}
infofenster.document.write("<b>" + typtext
+ "</b> (<i>" + info + "</i>)<br />");
// Kinder rekursiv bearbeiten
if (knoten.hasChildNodes()) {
for (var j = 0;
j < knoten.childNodes.length; j++) {
showDOMTree(knoten.childNodes[j],
indentation + 1);
}
}
}

//-->
</script>
</head>

<body onload="initDOMTree();">
<!-- Jetzt geht's los! -->
<font size="4" color="#FF0000">Hier sehen Sie
<i>die DOM-Baumstruktur <b>des aktuellen
<u>Dokuments</u></b></i>.</font>
</body>
</html>

Abbildung

Abbildung 19.1 Die DOM-Baumstrukturanalyse in Aktion

Im Grunde verwendet das Skript nur Funktionen, die bereits besprochen wurden, und benötigt deshalb nicht viele Erläuterungen.

Für die eigentliche Rekursion wird mithilfe der Methode knoten.hasChildNodes() überprüft, ob überhaupt Kindknoten vorhanden sind. Ist dies der Fall, werden sie in einer Schleife über alle Elemente des Arrays knoten.childNodes[] durchlaufen. Für jedes Kindelement wird wiederum die Funktion selbst aufgerufen; dabei wird der um 1 erhöhte Wert der Variablen indentation übergeben, um jeweils die korrekte Einrückung vorzunehmen.

Beachten Sie zuletzt, dass die explizite Deklaration der Schleifenzähler i und j mithilfe von var hier absolut notwendig ist, weil sie ansonsten als globale Variablen betrachtet würden und so bei der Rekursion die falschen Werte hätten.


Rheinwerk Computing - Zum Seitenanfang

19.7.3 DOM-Anwendung in der PraxisZur nächsten ÜberschriftZur vorigen Überschrift

Das wichtigste Anwendungsgebiet von DOM ist es, nachträglich Veränderungen an Struktur und Inhalt des Dokuments vorzunehmen. Am häufigsten wird es verwendet, um die Positionierung und andere per Stylesheet definierte Eigenschaften von Layern zu ändern. Die bereits in Kapitel 17, »Webseitenerstellung mit (X)HTML«, vorgestellten Layer sind frei schwebende <div>-Elemente, die über das CSS-Attribut position an eine bestimmte Stelle gesetzt werden. Die festgelegte Position kann nachträglich geändert werden, um Animationen zu erzeugen. Abgesehen davon können Sie auch jede andere CSS-Eigenschaft ändern, beispielsweise Farben, Schriftformatierungen, die generelle Sichtbarkeit oder die Stapelreihenfolge.

Über die DOM-Eigenschaft style können Sie auf die Stylesheet-Formatierungen von Layern (und beliebigen anderen HTML-Elementen) zugreifen und diese dynamisch ändern. Dabei besitzt style jeweils Untereigenschaften, deren Namen mit den Original-CSS-Attributen übereinstimmen. So können Sie etwa über top und left die Position eines absolut positionierten Layers ändern oder mithilfe von color die Schriftfarbe modifizieren. Die einzige Besonderheit gilt für diejenigen Attribute, deren CSS-Name einen Bindestrich enthält: Statt dieses Sonderzeichens wird in üblicher JavaScript-Bezeichner-Konvention der darauffolgende Buchstabe großgeschrieben – aus background-color wird beispielsweise backgroundColor; text-align wird zu textAlign.

Die Werte für die jeweiligen Stil-Eigenschaften sind Strings, deren Inhalt auf dieselbe Weise festgelegt wird wie bei Stylesheet-Angaben. Betrachten Sie zum Beispiel den folgenden Absatz:

<p id="info">Der Hintergrund dieses Absatzes kann gelb werden!</p>

Mithilfe der folgenden JavaScript-Anweisung können Sie den Hintergrund wie versprochen gelb einfärben:

document.getElementById("info").style
.backgroundColor = "#FFFF00";

Interessant ist in diesem Zusammenhang, dass neuere Browser Event Handler wie onmouseover oder onmouseout für beinahe jedes Element unterstützen. So ist es zum Beispiel inzwischen weit verbreitet, in umfangreichen Tabellen die Zeile oder Zelle, in der sich der Cursor gerade befindet, durch Änderung der Hintergrundfarbe hervorzuheben. Die folgende Funktion kann durch einen solchen Handler aufgerufen werden, um die Farbänderung durchzuführen:

function betonen(id, farbe) {
document.getElementById (id).
style.backgroundColor = farbe;
}

Hier sehen Sie eine Tabellenzeile, die bei Mausberührung mithilfe dieser Funktion ihre eigene Hintergrundfarbe ändert:

<tr id="zeile" style="background-color: #FFFF00"
onmouseover="betonen ('zeile', '#FFFF99');"
onmouseout="betonen ('zeile', '#FFFF99');">
<td>DOM</td>
<td>IE 4.0-Objektmodell</td>
<td>Netscape-Objektmodell</td>
</tr>

Die Manipulation der Eigenschaften von Layer-Objekten funktioniert im Prinzip genauso. Denken Sie daran, dass ein <div>-Element nur dann zum echten Layer wird, wenn es durch das CSS-Attribut position auf eine feste Position gesetzt wird. Da sich HTML-Tag-Knoten am leichtesten über ihre ID ansprechen lassen, liegt es nahe, die CSS-Formatierung für den Layer in einer unabhängigen Stilangabe vorzunehmen, die dem Layer dann gleichzeitig mit seiner ID zugewiesen wird.

Das folgende Beispiel lässt nach einer Wartezeit von drei Sekunden nach dem Laden einen Layer mit einem Bild von links in den sichtbaren Bereich des Fensters fahren; anschließend bleibt er fünf Sekunden stehen und wird schließlich ausgeblendet. Auf immer mehr Websites ist heute Werbung nach diesem Schema zu sehen. Hier das Listing:

<html>
<head>
<title>Aufdringliche Werbung</title>
<style type="text/css">
<!--

#werbung {
position: absolute;
top: 100px;
left: -200px
}

-->
</style>

<script language="JavaScript"
type="text/javascript">
<!--
// Aktuelle Position
var x = -200;

function werbungZeigen() {
x += 5;
document.getElementById ("werbung").style.
left = x + "px";
if (x >= 100)

setTimeout ("werbungSchliessen ();",
5000);
else
setTimeout ("werbungZeigen ();", 50);
}

function werbungSchliessen() {
document.getElementById ("werbung")
.style.visibility = "hidden";
}

setTimeout ("werbungZeigen();", 3000);

//-->
</script>
</head>
<body>
<div id="werbung"><img src="werbung.gif"
width="198" height="198"></div>
... beliebiger Inhalt ...
</body>
</html>

Rheinwerk Computing - Zum Seitenanfang

19.7.4 Dokumentinhalte verändern und austauschenZur vorigen Überschrift

Die Struktur des DOM-Baums, den ein HTML-Dokument bildet, kann beliebig manipuliert werden, um Inhalte vollständig gegen andere auszutauschen. Zu diesem Zweck sind Knotenobjekte mit einer Reihe von Methoden ausgestattet, die entsprechende Manipulationen ermöglichen. Tabelle 19.3 zeigt hierzu eine Übersicht.

Tabelle 19.3 Die wichtigsten Methoden zur Manipulation von Knoten

Methode Knotentyp(en) Bedeutung

createElement(Tagname)

document

Erzeugt einen neuen HTML-Tag-Knoten vom angegebenen Typ.

createTextNode (Text)

document

Erzeugt einen neuen Textknoten mit dem angegebenen Inhalt.

hasAttribute (Name)

element (HTML-Tag)

true, wenn das Tag das genannte Attribut besitzt

getAttribute (Name)

element

Gibt das Attribut mit dem angegebenen Namen zurück.

setAttribute
(Name, Wert)

element

Setzt das mit Name bezeichnete Attribut auf Wert.

removeAttribute
(Name)

element

Entfernt das genannte Attribut.

appendChild (Knoten)

alle

Hängt Knoten als letztes neues Kind an.

removeChild (Knoten)

alle

Entfernt den angegebenen Kindknoten.

replaceChild
(neuKnoten,
altKnoten)

alle

Ersetzt altKnoten durch neuKnoten.

Das folgende Listing tauscht den Inhalt eines vollständigen Absatzes aus, der aus mehreren Text- und Elementknoten besteht:

<html>
<head>
<title>Eine Geschichte in zwei Teilen</title>
<script language="JavaScript"
type="text/javascript">
<!--

function weiter() {
var k1 = document.createTextNode
("Hier folgt der zweite Teil des ");
var k2 = document.createElement ("b");
var k2a = document.createTextNode
("kurzen");
k2.appendChild (k2a);
var k3 = document.createTextNode
(" Textes.");
document.getElementById ("story")
.replaceChild (k1, document.
getElementById ("story").firstChild);
document.getElementById ("story")
.appendChild (k2);
document.getElementById ("story")
.appendChild (k3);
}

//-->
</script>
</head>
<body>
<div id="story"><p>Dies ist ein <i>kurzer</i>
Text. Er besteht aus zwei Teilen. Den zweiten Teil
k&ouml;nnen Sie durch Klick auf den Link

&quot;Weiter&quot; lesen.</p></div>
<p><a href="javascript:weiter();">Weiter</a></p>
</body>
</html>

Da von Anfang an bekannt ist, dass der komplette Inhalt des <div>-Elements mit der ID story ausgetauscht werden soll, wurde dieser insgesamt zwischen die Tags <p> und </p> gepackt. Eine mögliche Alternative bestünde darin, sämtliche Kindknoten von story mithilfe einer Schleife zu entfernen:

while (document.getElementById ("story")
.hasChildNodes()) {
document.getElementById ("story").removeChild
(document.getElementById ("story").firstChild);
}

In der vorliegenden Lösung werden zunächst die Knoten für den Ersatztext von Grund auf neu erzeugt: die beiden Textknoten k1 und k3 sowie der dazwischenliegende Elementknoten k2 vom Typ "b" (das HTML-Tag <b>) und sein Text. Anschließend wird der bisher einzige Kindknoten von story, das <p>-Element, mithilfe von replaceChild() durch k1 ersetzt; die beiden folgenden Knoten k2 und k3 werden durch appendChild() angefügt.

Praktisch gesehen wird in diesem Beispiel der Text »Dies ist ein kurzer Text. Er besteht aus zwei Teilen.« gegen den neuen Inhalt »Hier folgt der zweite Teil des kurzen Textes.« ausgetauscht.



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