Upload
joern-junge
View
220
Download
0
Embed Size (px)
Citation preview
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>