DML Dynamic HTML

Inhaltsübersicht n Vorstellungsrunde n Einführung n Image Rollover - Die erste DHTML- Anwendung n Die 3 Grundbausteine von DHTML n Die wichtigsten DOM-Objekte n 4 Anwendungen von DHTML n Verschiedene Formen von DHTML

Vorstellungsrunde n Name, Firma n Erfahrungen –Kenntnisse HTML –Kenntnisse CSS –Kenntnisse JavaScript / OO-Programmierung –Ihr Projekt, Zielmedium (Internet / Intranet) –Werkzeuge n Persönliche Kursziele –Gelerntes wie anwenden? –Spezielle Fragen

Einführung n DHTML ist kein Produkt n DHTML ist kein Standard n DHTML ist ein Konzept, zusammengesetzt aus mehreren Standards Kapitel 1

Was ist DHTML DHTML nennen wir n das Verändern von Elementen auf einer Webseite, n nachdem sie fertig geladen ist, n mittels einer Scriptsprache, n dem Browser-Objektmodell n und unter Zuhilfenahme von CSS, n ohne nochmals den Server aufzurufen Kapitel 1

DHTML-Beispiele n n n n n n

Übung 1: Image Rollover - Die erste DHTML-Anwendung n Übung 1a: Image Rollover –Beim Überfahren des Auges mit der Maus soll es sich öffnen. Dazu tauschen wir das Bild des geschlossenen Auges durch das offene aus n Übung 1b: Image Caching –Damit keine Verzögerung beim Überfahren mit der Maus eintritt, cachen wir die Bilder versteckt beim Laden der Seite

Übung 1a: Image Rollover n Ergänzen Sie im Anchor-Tag die Events "onMouseOver" und "onMouseOut" so, dass das Image-Objekt als Argument an die Zielfunktionen übergeben wird n Schreiben Sie die imgover- und imgout- Funktionen, so dass das src-Attribut des übergebenen imgobject auf das jeweils andere Bild gesetzt wird n Testen Sie die Seite mit NS4 und IE4/5

Übung 1b: Image Caching n Schreiben Sie in den Scriptbereich im HEAD Code, der zwei neue Image- Objekte erzeugt (var = New Image()) n Weisen Sie den src-Attributen dieser Objekte die Adressen der beiden Augenbilder zu n Testen Sie die Seite mit NS4 und IE4/5

Die 4 Grundbausteine von DHTML n HTML – n JavaScript – – – n Document Object Model DOM – n Cascading Style Sheets CSS –

HTML n Ist eine Seitenbeschreibungssprache n Wichtige Elemente TagAttributWert

JavaScript... n...hat mit Java ausser einer gewissen Syntax-Ähnlichkeit nicht viel gemeinsam. n...ist eine prozedurale Skriptsprache n...ist objektbasiert (nicht objektorientiert) n...wird interpretiert, und zwar durch den Browser n...heisst eigentlich offiziell ECMA-Script (JavaScript bei Netscape, JScript bei Microsoft) S , Kapitel 11

JavaScript Rekapitulation: Object – Property - Method Object (Objekt) var mycar = new Car(); (object = Substantiv) Property (Eigenschaft, Attribut) mycar.color = red; (property = Adjektiv des Objekts) Method (Methode) mycar.accelerate(); (method = Verb des Objekts)

Das Document Object Model n Das Document Object Model (DOM) ist eine Programmierschnittstelle (API) für HTML und XML Dokumente n Das DOM macht alle Elemente (Tags, Objekte) einer Webseite in einem Objektbaum zugänglich S. 9-11, Kapitel 9

DOM Struktur TheCurrentWindow self, window, parent, top Various Window objects navigator Navigator object frames[] array of Window objects location Location object history History object document Document object plugins[] array of Plugin objects mimeTypes[] array of MimeType objects forms[] array of Form objects anchors[] array of Anchor objects links[] array of Link objects images[] array of Image objects applets[] array of applets embeds[] array of embedded objects elements[] array of HTML Form Element Objects: Button Checkbox FileUpload Hidden Password Radio Reset Select Submit Text Textarena options[] array of Option objects S. 9-11, Kapitel 9 (

Die wichtigsten DOM-Objekte n Standard-HTML-Tags –Danny Goodmans Object Roadmap n Container-Objekte –DIV (Netscape 5+, IE 4+) –SPAN (Netscape 5+, IE 4+) –LAYER (nur Netscape 4)

Übung 2a: Datums-/Zeitanzeige n Eine sekundenweise aktualisierte Uhr soll per DHTML auf die Seite geschrieben werden n Dazu wird ein Containerobjekt geschaffen (DIV), dessen Inhalt (Attribut innerHTML) jede Sekunde durch die aktuelle Zeit ersetzt wird n Welches sind die wichtigsten 3 Zeilen dieses DHTML-Codes?

CSS Cascading Style Sheets erlauben das Setzen und Verändern der Darstellungseigenschaften von Elementen einer Webseite. Kapitel

Welche Browser unterstützen CSS? n Internet Explorer ab Version 3 n Netscape Navigator ab Version 4 (stark fehlerbehaftet) n Opera ab Version 3.5

Vier Arten von Cascading Style Sheets n Inline Styles –Für jedes Element einzeln den Style definieren n Embedded Style Sheets –Styles spezifisch für eine Webseite definieren n External Style Sheet –Globale Styles für die gesamte Website definieren n Imported Style Sheet –Globale Styles für andere Stylesheets vorgeben

Style-Attribut als Verbindung zu den CSS-Properties n Jedes Objekt auf einer Seite hat ein style-Attribut n Das style-Attribut ist eine Collection, in der alle CSS-Attribute gesammelt sind und verändert werden können n Netscape-Implementation ist fehlerhaft

Übung 2b: Class "Uhr" definieren n Grundlage: Seite aus Übung 2a n Definieren Sie die Klasse "Uhr" im eingebundenen Style Sheet mit den folgenden Angaben: n Schriftart (font-family): "Century Gothic" und "Arial" n Schriftgrösse (font-size): 36 Punkte n Farbe (color): Blau n Testen Sie die Seite mit IE4/5

Übung 2c: Funktionen ergänzen n Funktion "rot" –Ändert die Farbe (Attribut "color") des Elements "MicrosoftUhr" auf Rot (red oder #ff0000) –Ändert die Schriftgrösse (Attribut "font-size") des Elements "MicrosoftUhr" auf 12 Punkte (12pt) n Funktion "gruen" –Ändert die Farbe des Elements "MicrosoftUhr" auf Grün (green oder #00ff00) –Ändert die Schriftgrösse des Elements "MicrosoftUhr" auf 24 Punkte (24pt) n Testen Sie die Seite mit IE4/5

Übung 3: interne/externe Hyperlinks n Ziel: Ein DHTML-Script läuft durch alle Hyperlinks einer Seite durch und verändert ihr Aussehen, wenn es sich um externe Hyperlinks handelt n Vorteil: Autoren von Seiten müssen sich bei der Erstellung von Seiten nicht um diese Kennzeichnung kümmern

Übung 3: interne/externe Hyperlinks a)ergänzen Sie den -Tag so, dass die Funktion "initialisieren()" beim Laden der Seite gestartet wird b)for-Schlaufe: –ergänzen Sie die for-Schlaufe mit einem "if" und "else" Statement –b.1) if-Statement(externe Links): n kontrollieren Sie, ob die ersten vier Zeichen des Links (Attribut href) ="http" sind n wenn das zutrifft, weisen Sie dem Link die Farbe Rot zu –b.2) else-Statement(interne Links): n weisen Sie den restlichen Links(interne Links) die Farbe Grün zu c)testen Sie die Seite mit IE 4/5 d)fügen Sie weitere interne und externe Hyperlinks hinzu und testen Sie die Seite erneut mit IE 4/5

Identifizieren der Elemente n Jedem Element, dass Sie dynamisch bearbeiten wollen, müssen Sie eine ID per HTML-Attribut zuweisen n Wenn Sie Elemente positionieren, sollten Sie die Element in die "Container" oder einschliessen. (Weder IE noch Netscape unterstützt das Positionieren von nicht- Container-Elementen vollständig) n Die ID des Containers findet sich im DOM wieder

ID im DOM n IE 4/5 –document.all.id n Netscape 4 –document.layers.id –Wenn Container in Containern liegen: document.layers.id.document.layers.id S

Übung 4: DHTML Positionierung n Element dynamisch verschieben n function moveIE ist für IE 4/5 und spricht das Objekt "objectIE" an n function moveNS ist für Netscape 4 und spricht das Objekt "objectNS" an

Übung 4a) DHTML Positionierung n Rufen Sie mit den Hyperlinks die entsprechenden Funktionen auf (URL ist "Javascript:funktion()") n Übergeben Sie der Funktion die entsprechenden Zielwerte (x/y)

Übung 4b) DHTML Positionierung n Funktion "moveIE": –Übergeben Sie der Style-Objekteigenschaft "pixelTop" des Elements "elementIE" den Wert von "y" –Übergeben Sie der Style-Objekteigenschaft "pixelLeft" des Elements "elementIE" den Wert von "x"

Übung 4c) DHTML Positionierung n Funktion "moveNS" –Übergeben Sie der Eigenschaft "top" des Layer-Objekts "elementNS" den Wert von "y" –Übergeben Sie der Eigenschaft "left" des Layer-Objekts "elementNS" den Wert von "x" n Testen Sie die Seite mit Netscape 4 und IE 4/5

Übung 4d) DHTML Positionierung n Funktion "moveNS" –Das Layer-Objekt besitzt die Methode(Method) "moveTo()" –Statt der "top"- und "left"-Eigenschaft wenden Sie die Methode "moveTo()" an n Testen Sie die Seite mit Netscape 4

4 Anwendungen von DHTML n Texteffekte –Liquid HTML n Navigationseffekte –Information Hiding –Floating Containers –Zweistufige Dropdown-Navigation

Liquid HTML n Fliesstext schreiben n Zu erklärende Worte als Hyperlinks markieren n Funktion schreiben, die erklärenden Text erscheinen/verschwinden lässt n Beispiel in Kursdateien

Information Hiding n Ein Gefäss für Intro-Text definieren (DIV) n 3 Hyperlinks mit Besucherprofilen (Entwickler, Endbenutzer, Entscheider) n Je nach Hyperlink unterschiedliche Inhalte im Intro-Text-Gefäss einblenden n Beispiel in Kursdateien

Floating Containers n DIVs mit Inhalten definieren n Auf Mausklick DIV aufnehmen, ablegen n

Zweistufige Dropdown- Navigation n Formular mit Dropdown und Go-Button – lect_s.html lect_s.htmlhttp://stars.com/Authoring/HTML/Forms/se lect_s.html n Option 1: Objektmethode bei Dropdown-Auswahl – n Option 2: Ändern des Dropdown 2 aufgrund Auwahl Dropdown 1 –

Verschiedene Formen von DHTML n W3C-DOM-Standard n IE4-/IE5-Implementation n Netscape 4 – Implementation n Netscape 5 - Implementation

Cross-Browser DHTML Der erste Schritt: n Was sind meine Ziele? n Welche Browser benützt meine Zielgruppe? Kapitel 2, S

Beispielszenarien: n Alle Browser müssen dieselbe Funktionalität erhalten n Wir senden alle nicht-DOM-kompatiblen Browser zu einer nur-Text-Variante der Site n Browser von Version 4.0 oder höher erhalten dynamische Version, alle andern müssen bloss lesen und navigieren können Kapitel 2, S

Branching n Browserversions-Unterscheidung n Auf 3 Ebenen möglich –High Level Branching n Mehrere Seiten für mehrere Browser –Mid Level Branching n Frühe Zuweisung symbolischer Variabeln –Low Level Branching n Jedes Statement mit IF versehen S

High Level Branching Browser/ Version? ns4.htmdom.htmnodhtml.htm Netscape 4IE 4+, Netscape 5+ andere

Mid Level Branching page.htm Browser/ Version? ns4 var objects = document.layers function myFunc(myObject) myId = objects.myObject.id dom var objects = document.all Netscape 4IE 4+, Netscape 5+

Low Level Branching page.htm function changeBG(myObj) Browser/ Version? objects.myObj.bgColor= red objects.myObj.style.backgroundColor=red Netscape 4IE 4+, Netscape 5+

Browser-Unterscheidung n Clientseitig –Navigator-Objekt –document.all / document.layers n Serverseitig (IIS 4, ASP) –browscap.ini –BrowserHawk n S. 26,

Übung 5: Mid Level Branching n Verschachtelte Layer ansprechen n testen Sie die Seite mit Netscape und IE 3 + 4/5 n schauen Sie sich den Code an und versuchen Sie, die Schritte nachzuvollziehen

Tipps n Entwickeln Sie auf Netscape 4, da sie dann die schwierigste Hürde bereits genommen haben n Testen auf Sie auf allen Browsern, die in Ihr Besucherprofil passen n Schreiben Sie Funktionen in externe js- Dateien (werden gecacht) n Erfinden Sie das Rad nicht neu und benutzen Sie Scripts und API-libraries, die auf verschiedenen Seiten kostenlos zur Verfügung stehen

Custom APIs n The Dynamic Duo – –The Dynamic Layer Object API n n SiteExperts.Com – –DHTMLLib 2.0 n

Links n Research und Tutorials – – – – – – – – – – –

Links n Beispiele: – – – – – – – –

Viel Erfolg