DHTML

Begleitmaterial für den Kurs Dynamische Webseiten

Rechenzentrum Universität HohenheimHani Sahyoun

DHTML - Kursfolien 2

DHTML - MerkmaleDHTML erweitert HTML-Seiten durch Interaktive Veränderung eines

Webdokuments nach dem Download

Animationen Multimediale Effekte

DHTML - Kursfolien 3

DHTML - Komponenten HTML CSS Programmiersprachen

JavaScript ActiveX, VBScript

DOM (Document Object Model): Alle Bestandteile einer Webseite werden wie einzelne Objekte behandelt

DHTML - Kursfolien 4

Document Object Model DOM-Standard durch W3C normiert Netscape ab Version 6 und MSIE ab

Version 5 halten sich an diesen Standard

Weitere Infos zu DOM unterhttp://www.rz.uni-hohenheim.de/www/html/selfhtml/dhtml/modelle/

dom.htm

DHTML - Kursfolien 5

Document Object ModelDas Prinzip hinter DOM Das Dokument im Browserfenster besteht

aus hierarchisch gegliederten Objekten HTML-Elemente erhalten einen Namen

(bei Bildelementen) oder eine id, Beispiel:<img name="button1" src="button1.gif"><div id="objekt1">…</id>

Diese HTML-Elemente können dann als Objekte durch JavaScript oder andere Skriptsprachen manipuliert werden.

DHTML - Kursfolien 6

Document Object ModelDas Prinzip hinter DOM Die Eigenschaften einer 'id' werden

durch CSS definiert, Beispiel:<style type="text/css">

#objekt1 { position: absolute; top: 100px; left: 150px; visibility: visible; width:210px; }

</style>

DHTML - Kursfolien 7

ObjekthierarchieObjekthierarchie des window-Objekts

window

history location

document

Images [i]

links [i] forms [i]

elements[0]

elements[1]

elements[2]

DHTML - Kursfolien 8

Document Object ModelObjektadressen Eindeutige Zuordnung Adresse <-> Objekt Ermöglichen den Zugriff auf einzelne Objekte

Syntax der Objektadresse: window.document.Objektname document.Objektname window.document.Objektid document.Objektid

Hinweis: "window." kann als Bestandteil der Adresse entfallen, wenn man ein Objekt im selben Fenster referenziert.

DHTML - Kursfolien 9

Document Object ModelEigene Objekte definieren und

erstellen1. Definition erfolgt innerhalb von CSS

(im Dateikopf oder in einer separaten CSS-Datei)

Syntax der Definition:#Objektname { Eigenschaften };

DHTML - Kursfolien 10

Document Object ModelObjekte definieren, Beispiel<style media="screen" type="text/css">#objekt1 { position: absolute; top: 100px; left: 150px; visibility: visible; width:210px; }</style>

DHTML - Kursfolien 11

Document Object ModelObjekte definieren und erstellen2. Objekt wird durch Verknüpfung mit der

Stylesheet-Definition erstellt:<div id="Objektname">…</div>Beispiel:<div id=" objekt1"><h3>Das ist Objekt1</h3><img src="images/bild.gif"></div>

DHTML - Kursfolien 12

Document Object Model Jedem Objekt sind Eigenschaften

und Methoden (Funktionen) zugeordnet. Mit Hilfe der Methoden oder benutzer-definierten Funktionen lassen sich die Eigenschaften verändern.

Der Aufruf von Funktionen erfolgt mit Hilfe von einem Event-Handler

DHTML - Kursfolien 13

Document Object Model Der Zugriff auf das Objekt erfolgt

über die Objektadresse. Jedes Objekt im Browserfenster hat eine eindeutige Adresse.

Beispiele document.images.button1 document.bestellformular.adresse

DHTML - Kursfolien 14

DOM und Event-HandlerEvent-Handler (Ereignisverarbeiter) bieten die Möglichkeit, auf Benutzeraktionen imBrowserfenster zu reagieren undObjekteigenschaften zu verändern.Besipiele: <INPUT TYPE=BUTTON VALUE="rot"

onClick="document.bgColor='red' "> <img id="bild1" src="../images/ring.gif"

onMouseOver="zeigen(0)"onmouseout="zeigen(1)">Hinweis: zeigen() ist eine benutzerdefinierte Funktion

DHTML - Kursfolien 15

DOM und Event-HandlerListe der Event-Handler und der Objekte, mit denen sie verknüpft

werden onAbort (bei Abbruch: image)

onBlur (beim Verlassen: select, text, textarea, window)onChange (bei erfolgter Änderung: select, text, textarea)onClick (beim Anklicken: button, checkbox, radio, link, submit, reset)onError (im Fehlerfall: image, window)onFocus (beim Aktivieren: select, text, textarea, window)onKeydown (bei gedrückter Taste)onKeypress (bei gedrückt gehaltener Taste)onKeyup (bei losgelassener Taste)

DHTML - Kursfolien 16

DOM und Event-HandlerListe der Event-Handler onLoad (beim Laden: image, window)

onMousedown (bei gedrückter Maustaste)onMousemove (bei weiterbewegter Maus)onMouseout (beim Verlassen des Elements mit der Maus)onMouseover (beim Überfahren des Elements mit der Maus)onMouseUp (bei losgelassener Maustaste)onReset (beim Zurücksetzen des Formulars)onSelect (beim Selektieren von Text)onSubmit (beim Absenden des Formulars)onUnload (beim Verlassen der Datei)

DHTML - Kursfolien 17

DOM und Event-HandlerSyntax für Event-Handler:Event-Handler = "Aktion"Event-Handler = "Aktion1; Aktion2; Aktion3"Beispiel:<input type="submit" onClick="CheckForm() ">Anmerkungen: CheckForm() ist in diesem Beispiel

einebenutzerdefinierte Funktion, die die Eingaben in

dieFormularfelder überprüft.

DHTML - Kursfolien 18

DOM und Event-HandlerMit welchen HTML Elementen können Event-Handler verknüpft werden? Bei IE ab Version 4 und Netscape ab Version 6

können alle HTML-Elemente mit Event-Handlern verknüpft werden.

Bei Netscape 4.xx geht es nur mit folgenden Elementen:

<body> <form> (Formularelemente) <a> (Link)

DHTML - Kursfolien 19

Das Object 'document'Das Objekt 'document' Eigenschaften:   alinkColor (Farbe für Verweise beim Anklicken)

 bgColor (Hintergrundfarbe)  charset (verwendeter Zeichensatz)  cookie (beim Anwender speicherbare Zeichenkette)  defaultCharset (normaler Zeichensatz)  fgColor (Farbe für Text)  lastModified (letzte Änderung am Dokument)  linkColor (Farbe für Verweise)  referrer (zuvor besuchte Seite)  title (Titel der Datei)  URL (URL-Adresse der Datei)  vlinkColor (Farbe für Verweise zu besuchten Zielen)

DHTML - Kursfolien 20

Das Object 'document'Das Objekt 'document' Auswahl der wichtigsten Methoden:     captureEvents() (Ereignisse überwachen)

 close() (schließen)  createAttribute() (Attributknoten erzeugen)  createElement() (Elementknoten erzeugen)  createTextNode() (Textknoten erzeugen)  getElementById() (HTML-Elementzugriff über id-Attribut)  getElementsByName() (HTML-Elementzugriff über name-Attribut)  getElementsByTagName() (HTML-Elementzugriff über Elementliste)  getSelection() (selektierter Text)  handleEvent() (Ereignisse verarbeiten)  open() (Dokument öffnen)  write() (ins Dokumentfenster schreiben)  writeln() (zeilenweise schreiben)

DHTML - Kursfolien 21

Änderung von CSS-StilenDas DOM ermöglicht die Änderung vonFormatierungsangaben, die einem

ObjektMit Hilfe von CSS zugewiesen wurden. Die Methoden unterscheiden sich bei

denVerschiedenen Browsern:

DHTML - Kursfolien 22

Änderung von CSS-Stilen Netscape 4.xx arbeitet mit Layers

document.layers['ObjectID'].Eigenschaft

Beispiel:document.layers['Bild1'].left = 150pxdocument.layers['Bild1'].top = 150px

DHTML - Kursfolien 23

Änderung von CSS-Stilen Im IE ab Version 4.xx ist erfolgt der

Zugriff auf einzelne Objekte und Eigenschaften über document.all['ObjectID'].style.Eigenschaft

Beispiele:document.all['Bild1'].style.left = 150pxdocument.all['Bild1'].style.top = 150pxdocument.all['Absatz1'].style.color = red

DHTML - Kursfolien 24

Änderung von CSS-Stilen Nach dem W3C DOM-Standard erfolgt der

Zugriff auf einzelne Objekte und Eigenschaften über document.getElementById['ObjectID'].style.Eigenschaft

Beispiele:document. getElementById['Bild1'].style.left = 150pxdocument. getElementById['Bild1'].style.top = 150pxdocument. getElementById['Absatz1'].style.color = red

DHTML - Kursfolien 25

Änderung von CSS-StilenFolgende Browser halten sich an den W3C DOM-Standard: Netscape ab Version 6 IE ab Version 5 Opera ab Version 4

DHTML - Kursfolien 26

Browser-unabhängiges DHTML

function getDomStyle(ObjectID) { if (document.getElementById)// Netscape >= 6, IE >= 5, Opera >= 4 { return (document.getElementById(ObjectID).style); } else if (document.all) // IE = 4 {

return (document.all[ObjectID].style); } else if (document.layers) // Netscape 4.xx { return (document.layers[ObjectID]); }}

DHTML - Kursfolien 27

DOM-Objekt bestimmen Die Function getDomStyle(name)

ermittelt, abhängig vom Browsertyp Das DOM-Objekt, das geändert werden soll. Die Unterscheidung erfolgt nicht über Browsernamen und –version, sondern über die Merkmale, die ein Browser unterstützt. (Feature sensing, statt Browser sensing)

DHTML - Kursfolien 28

Änderung vonWichtige Hinweise: Der Zugriff auf Objekte in einem

Browserfenster erfolgt über die Object-ID.

Jedes Objekt, das dynamisch geändert werden soll, muss eine ID erhalten

Die Eigenschaften müssen über stylesheets definiert werden

DHTML - Kursfolien 29

Änderung von CSS-StylenBeispiel für die Layers-Technik von Netscape 4.xx:<html> <head> <title>Netscape 4.xx Layers-Technik</title>

<script language="JavaScript"> function ObjektVerschieben (objectID)

{ document.layers[objectID].left = 120; document.layers[objectID].top = 200; } </script><style media="screen" type="text/css">#object1 { position: absolute; top: 10px; left: 10px; visibility: visible } </style>

</head>

DHTML - Kursfolien 30

Änderung von CSS-StylenBeispiel für die Layers-Technik (Fortsetzung):<body>

<div id="object1"> <a href="#" onmouseOver="ObjektVerschieben('object1')"> Dieses Beispiel funktioniert in Netscape 4 and kompatible Browser. <br> <img src="kugel.gif" width="200" height="298" border="0"></a></div>

</body></html>

DHTML - Kursfolien 31

Änderung von CSS-StylenHinweis zu Netscape 4.xx und CSS-

Formatangaben: Mit der Layers-Technik von Netscape kann man

nur Position und Sichtbarkeit von Objekten ändern

Folgende Eigenschaften können nicht geändert werden:

Textinhalt Text- und Hintergrundfarbe Textumrandung

DHTML - Kursfolien 32

Ändern von Textinhalten<p id="Absatz" style="color:red" onMouseOver =

"document.getElementById('Absatz').firstChild.data = 'Der DHTML-Kurs findet in dem neuen Multimedia PC-Raum statt.'"

onMouseOut="document.getElementById('Absatz').firstChild.data='Wichtige Nachricht für Kursteilnehmer.'">Wichtige Nachricht für Kursteilnehmer.</p>