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.

Präsentation zum Thema: "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."—  Präsentation transkript:

1 DML Dynamic HTML

2 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

3 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

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

5 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

6 DHTML-Beispiele n http://www.yaromat.com/macos8/index.htm http://www.yaromat.com/macos8/index.htm http://www.yaromat.com/macos8/index.htm n http://www.desktop.com http://www.desktop.com n http://www.htmlguru.com http://www.htmlguru.com n http://www.bratta.com http://www.bratta.com n http://www.borgstrom.com http://www.borgstrom.com n http://www.corenet.ch/ http://www.corenet.ch/

7 Ü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

8 Ü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

9 Ü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

10 Die 4 Grundbausteine von DHTML n HTML –http://www.w3.org/MarkUp/ n JavaScript –http://www.ecma.ch/stand/ECMA-262.htm http://www.ecma.ch/stand/ECMA-262.htm –http://developer.netscape.com/docs/manuals/js/client/jsref/ http://developer.netscape.com/docs/manuals/js/client/jsref/ –http://msdn.microsoft.com/scripting/jscript/doc/jstoc.htm n Document Object Model DOM –http://w3.org/DOM http://w3.org/DOM n Cascading Style Sheets CSS –http://w3.org/Style/css http://w3.org/Style/css

11 HTML n Ist eine Seitenbeschreibungssprache n Wichtige Elemente TagAttributWert

12 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. 11-12, Kapitel 11

13 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)

14 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

15 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 (http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html) http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html

16 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)

17 Ü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?

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

19 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

20 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

21 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

22 Ü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

23 Ü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

24 Ü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

25 Ü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

26 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

27 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. 80-85

28 Ü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

29 Ü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)

30 Ü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"

31 Ü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

32 Ü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

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

34 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

35 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

36 Floating Containers n DIVs mit Inhalten definieren n Auf Mausklick DIV aufnehmen, ablegen n http://www.teamone.de/selfhtml/tfcb.htm http://www.teamone.de/selfhtml/tfcb.htm

37 Zweistufige Dropdown- Navigation n Formular mit Dropdown und Go-Button –http://stars.com/Authoring/HTML/Forms/se lect_s.html http://stars.com/Authoring/HTML/Forms/se lect_s.htmlhttp://stars.com/Authoring/HTML/Forms/se lect_s.html n Option 1: Objektmethode bei Dropdown-Auswahl –http://www.cei.net/~rgriebel/drop.html http://www.cei.net/~rgriebel/drop.html n Option 2: Ändern des Dropdown 2 aufgrund Auwahl Dropdown 1 –http://bronze.ch/deutsch/prod/halb http://bronze.ch/deutsch/prod/halb

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

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

40 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. 86-93

41 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. 21-27

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

43 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+

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

45 Browser-Unterscheidung n Clientseitig –Navigator-Objekt –document.all / document.layers n Serverseitig (IIS 4, ASP) –browscap.ini –BrowserHawk n http://www.browscap.com http://www.browscap.com S. 26, 661-667

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

47 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

48 Custom APIs n The Dynamic Duo –http://www.dansteinman.com/dynduo/ http://www.dansteinman.com/dynduo/ –The Dynamic Layer Object API n http://www.dansteinman.com/dynduo/en/dynlayer.html http://www.dansteinman.com/dynduo/en/dynlayer.html n SiteExperts.Com –http://www.siteexperts.com http://www.siteexperts.com –DHTMLLib 2.0 n http://www.siteexperts.com/dhtmllib/page1.asp http://www.siteexperts.com/dhtmllib/page1.asp

49 Links n Research und Tutorials –http://www.dhtmlzone.com http://www.dhtmlzone.com –http://www.netzwelt.com/selfhtml/tf.htm http://www.netzwelt.com/selfhtml/tf.htm –http://www.dynamicdrive.com http://www.dynamicdrive.com –http://www.webdeveloper.com/advhtml http://www.webdeveloper.com/advhtml –http://dhtml.seite.net http://dhtml.seite.net –http://www.bratta.com http://www.bratta.com –http://www.projectcool.com/developer/dynamic/ http://www.projectcool.com/developer/dynamic/ –http://www.webreference.com/dhtml/ http://www.webreference.com/dhtml/ –http://developer.netscape.com/tech/dynhtml/index.html http://developer.netscape.com/tech/dynhtml/index.html –http://msdn.microsoft.com/workshop/author/default.asp http://msdn.microsoft.com/workshop/author/default.asp –http://www.htmlguru.com http://www.htmlguru.com

50 Links n Beispiele: –http://www.leica-geosystems.com http://www.leica-geosystems.com –http://www.borgstrom.com http://www.borgstrom.com –http://www.desktop.com http://www.desktop.com –http://www.corenet.ch http://www.corenet.ch –http://cordoba.seat.es http://cordoba.seat.es –http://www.terrarium.nu http://www.terrarium.nu –http://www.zkb.ch http://www.zkb.ch –http://www.htmlguru.com http://www.htmlguru.com

51 Viel Erfolg