DHTML Begleitmaterial für den Kurs Dynamische Webseiten Rechenzentrum Universität Hohenheim Hani Sahyoun.

Präsentation zum Thema: "DHTML Begleitmaterial für den Kurs Dynamische Webseiten Rechenzentrum Universität Hohenheim Hani Sahyoun."—  Präsentation transkript:

1 DHTML Begleitmaterial für den Kurs Dynamische Webseiten Rechenzentrum Universität Hohenheim Hani Sahyoun

2 DHTML - Kursfolien2 DHTML - Merkmale DHTML erweitert HTML-Seiten durch Interaktive Veränderung eines Webdokuments nach dem Download Animationen Multimediale Effekte

3 DHTML - Kursfolien3 DHTML - Komponenten HTML CSS Programmiersprachen JavaScript ActiveX, VBScript DOM (Document Object Model): Alle Bestandteile einer Webseite werden wie einzelne Objekte behandelt

4 DHTML - Kursfolien4 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 unter http://www.rz.uni-hohenheim.de/www/html/selfhtml/dhtml/modelle/dom.htm

5 DHTML - Kursfolien5 Document Object Model Das Prinzip hinter DOM Das Dokument im Browserfenster besteht aus hierarchisch gegliederten Objekten HTML-Elemente erhalten einen Namen (bei Bildelementen) oder eine id, Beispiel: … Diese HTML-Elemente können dann als Objekte durch JavaScript oder andere Skriptsprachen manipuliert werden.

6 DHTML - Kursfolien6 Document Object Model Das Prinzip hinter DOM Die Eigenschaften einer 'id' werden durch CSS definiert, Beispiel: #objekt1 { position: absolute; top: 100px; left: 150px; visibility: visible; width:210px; }

7 DHTML - Kursfolien7 Objekthierarchie Objekthierarchie des window-Objekts window historylocationdocument Images [i] links [i] forms [i] elements[0] elements[1] elements[2]

8 DHTML - Kursfolien8 Document Object Model Objektadressen 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.

9 DHTML - Kursfolien9 Document Object Model Eigene Objekte definieren und erstellen 1. Definition erfolgt innerhalb von CSS (im Dateikopf oder in einer separaten CSS-Datei) Syntax der Definition: #Objektname { Eigenschaften };

10 DHTML - Kursfolien10 Document Object Model Objekte definieren, Beispiel #objekt1 { position: absolute; top: 100px; left: 150px; visibility: visible; width:210px; }

11 DHTML - Kursfolien11 Document Object Model Objekte definieren und erstellen 2. Objekt wird durch Verknüpfung mit der Stylesheet-Definition erstellt: … Beispiel: Das ist Objekt1

12 DHTML - Kursfolien12 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

13 DHTML - Kursfolien13 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

14 DHTML - Kursfolien14 DOM und Event-Handler Event-Handler (Ereignisverarbeiter) bieten die Möglichkeit, auf Benutzeraktionen im Browserfenster zu reagieren und Objekteigenschaften zu verändern. Besipiele: Hinweis: zeigen() ist eine benutzerdefinierte Funktion

15 DHTML - Kursfolien15 DOM und Event-Handler Liste 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)onAbort onBlur onChange onClick onError onFocus onKeydown onKeypress onKeyup

16 DHTML - Kursfolien16 DOM und Event-Handler Liste 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)onLoad onMousedown onMousemove onMouseout onMouseover onMouseUp onReset onSelect onSubmit onUnload

17 DHTML - Kursfolien17 DOM und Event-Handler Syntax für Event-Handler: Event-Handler = "Aktion" Event-Handler = "Aktion1; Aktion2; Aktion3" Beispiel: Anmerkungen: CheckForm() ist in diesem Beispiel eine benutzerdefinierte Funktion, die die Eingaben in die Formularfelder überprüft.

18 DHTML - Kursfolien18 DOM und Event-Handler Mit 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: (Formularelemente) (Link)

19 DHTML - Kursfolien19 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)alinkColorbgColorcharsetcookiedefaultCharsetfgColorlastModifiedlinkColorreferrertitleURLvlinkColor

20 DHTML - Kursfolien20 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) captureEvents()close()createAttribute()createElement()createTextNode()getElementById()getElementsByName()getElementsByTagName()getSelection()handleEvent()open()write()writeln()

21 DHTML - Kursfolien21 Änderung von CSS-Stilen Das DOM ermöglicht die Änderung von Formatierungsangaben, die einem Objekt Mit Hilfe von CSS zugewiesen wurden. Die Methoden unterscheiden sich bei den Verschiedenen Browsern:

22 DHTML - Kursfolien22 Änderung von CSS-Stilen Netscape 4.xx arbeitet mit Layers document.layers['ObjectID'].Eigenschaft Beispiel: document.layers['Bild1'].left = 150px document.layers['Bild1'].top = 150px

23 DHTML - Kursfolien23 Ä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 = 150px document.all['Bild1'].style.top = 150px document.all['Absatz1'].style.color = red

24 DHTML - Kursfolien24 Ä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 = 150px document. getElementById['Bild1'].style.top = 150px document. getElementById['Absatz1'].style.color = red

25 DHTML - Kursfolien25 Änderung von CSS-Stilen Folgende Browser halten sich an den W3C DOM-Standard: Netscape ab Version 6 IE ab Version 5 Opera ab Version 4

26 DHTML - Kursfolien26 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]); }

27 DHTML - Kursfolien27 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)

28 DHTML - Kursfolien28 Änderung von Wichtige 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

29 DHTML - Kursfolien29 Änderung von CSS-Stylen Beispiel für die Layers-Technik von Netscape 4.xx: Netscape 4.xx Layers-Technik function ObjektVerschieben (objectID) { document.layers[objectID].left = 120; document.layers[objectID].top = 200; } #object1 { position: absolute; top: 10px; left: 10px; visibility: visible }

30 DHTML - Kursfolien30 Änderung von CSS-Stylen Beispiel für die Layers-Technik (Fortsetzung): Dieses Beispiel funktioniert in Netscape 4 and kompatible Browser.

31 DHTML - Kursfolien31 Änderung von CSS-Stylen Hinweis 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

32 DHTML - Kursfolien32 Ä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.