Date post: | 05-Apr-2015 |
Category: |
Documents |
Upload: | margareta-weise |
View: | 113 times |
Download: | 2 times |
DMLDML
Dynamic HTMLDynamic HTML
Inhaltsübersicht Inhaltsübersicht
VorstellungsrundeVorstellungsrunde EinführungEinführung Image Rollover - Die erste DHTML-Image Rollover - Die erste DHTML-
AnwendungAnwendung Die 3 Grundbausteine von DHTMLDie 3 Grundbausteine von DHTML Die wichtigsten DOM-ObjekteDie wichtigsten DOM-Objekte 4 Anwendungen von DHTML4 Anwendungen von DHTML Verschiedene Formen von DHTMLVerschiedene Formen von DHTML
VorstellungsrundeVorstellungsrunde Name, FirmaName, Firma Erfahrungen Erfahrungen
– Kenntnisse HTMLKenntnisse HTML– Kenntnisse CSSKenntnisse CSS– Kenntnisse JavaScript / OO-ProgrammierungKenntnisse JavaScript / OO-Programmierung– Ihr Projekt, Zielmedium (Internet / Intranet) Ihr Projekt, Zielmedium (Internet / Intranet) – WerkzeugeWerkzeuge
Persönliche KurszielePersönliche Kursziele– Gelerntes wie anwenden?Gelerntes wie anwenden?– Spezielle FragenSpezielle Fragen
EinführungEinführung
DHTML ist kein ProduktDHTML ist kein Produkt DHTML ist kein StandardDHTML ist kein Standard DHTML ist ein Konzept, DHTML ist ein Konzept,
zusammengesetzt aus mehreren zusammengesetzt aus mehreren StandardsStandards
Kapitel 1Kapitel 1
Was ist DHTMLWas ist DHTML
DHTML nennen wir DHTML nennen wir das Verändern von Elementen auf einer das Verändern von Elementen auf einer
Webseite, Webseite, nachdem sie fertig geladen ist, nachdem sie fertig geladen ist, mittels einer Scriptsprache,mittels einer Scriptsprache, dem Browser-Objektmodell dem Browser-Objektmodell und unter Zuhilfenahme von CSS,und unter Zuhilfenahme von CSS, ohne nochmals den Server aufzurufenohne nochmals den Server aufzurufen
Kapitel 1Kapitel 1
DHTML-BeispieleDHTML-Beispiele
http://www.yaromat.com/macos8/http://www.yaromat.com/macos8/index.htmindex.htm
http://www.desktop.com http://www.desktop.com http://www.htmlguru.comhttp://www.htmlguru.com http://www.bratta.comhttp://www.bratta.com http://www.borgstrom.com http://www.borgstrom.com http://www.corenet.ch/http://www.corenet.ch/
Übung 1: Image Rollover - Übung 1: Image Rollover - Die erste DHTML-Die erste DHTML-AnwendungAnwendung
Übung 1a: Image RolloverÜbung 1a: Image Rollover– Beim Überfahren des Auges mit der Beim Überfahren des Auges mit der
Maus soll es sich öffnen. Dazu tauschen Maus soll es sich öffnen. Dazu tauschen wir das Bild des geschlossenen Auges wir das Bild des geschlossenen Auges durch das offene ausdurch das offene aus
Übung 1b: Image CachingÜbung 1b: Image Caching– Damit keine Verzögerung beim Damit keine Verzögerung beim
Überfahren mit der Maus eintritt, cachen Überfahren mit der Maus eintritt, cachen wir die Bilder versteckt beim Laden der wir die Bilder versteckt beim Laden der SeiteSeite
Übung 1a: Image RolloverÜbung 1a: Image Rollover
Ergänzen Sie im Anchor-Tag die Events Ergänzen Sie im Anchor-Tag die Events "onMouseOver" und "onMouseOut" so, "onMouseOver" und "onMouseOut" so, dass das Image-Objekt als Argument an dass das Image-Objekt als Argument an die Zielfunktionen übergeben wirddie Zielfunktionen übergeben wird
Schreiben Sie die imgover- und imgout-Schreiben Sie die imgover- und imgout-Funktionen, so dass das src-Attribut des Funktionen, so dass das src-Attribut des übergebenen imgobject auf das jeweils übergebenen imgobject auf das jeweils andere Bild gesetzt wirdandere Bild gesetzt wird
Testen Sie die Seite mit NS4 und IE4/5Testen Sie die Seite mit NS4 und IE4/5
Übung 1b: Image CachingÜbung 1b: Image Caching
Schreiben Sie in den Scriptbereich im Schreiben Sie in den Scriptbereich im HEAD Code, der zwei neue Image-HEAD Code, der zwei neue Image-Objekte erzeugt (var = New Image())Objekte erzeugt (var = New Image())
Weisen Sie den src-Attributen dieser Weisen Sie den src-Attributen dieser Objekte die Adressen der beiden Objekte die Adressen der beiden Augenbilder zuAugenbilder zu
Testen Sie die Seite mit NS4 und Testen Sie die Seite mit NS4 und IE4/5IE4/5
Die 4 Grundbausteine von Die 4 Grundbausteine von DHTMLDHTML
HTMLHTML– http://www.w3.org/MarkUp/http://www.w3.org/MarkUp/
JavaScriptJavaScript– 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.htmhttp://msdn.microsoft.com/scripting/jscript/doc/jstoc.htm
Document Object Model DOMDocument Object Model DOM– http://w3.http://w3.orgorg/DOM/DOM
Cascading Style Sheets CSSCascading Style Sheets CSS– http://w3.http://w3.orgorg/Style//Style/csscss
HTMLHTML
Ist eine SeitenbeschreibungsspracheIst eine Seitenbeschreibungssprache Wichtige ElementeWichtige Elemente
TagTag
AttributAttribut
WertWert
<<IMGIMG SRCSRC="="/images/foeteli.jpg/images/foeteli.jpg">">
JavaScript...JavaScript...
...hat mit Java ausser einer gewissen ...hat mit Java ausser einer gewissen Syntax-Ähnlichkeit nicht viel gemeinsam.Syntax-Ähnlichkeit nicht viel gemeinsam.
...ist eine prozedurale Skriptsprache...ist eine prozedurale Skriptsprache ...ist objektbasiert (nicht objektorientiert)...ist objektbasiert (nicht objektorientiert) ...wird interpretiert, und zwar durch den ...wird interpretiert, und zwar durch den
BrowserBrowser ...heisst eigentlich offiziell ECMA-Script ...heisst eigentlich offiziell ECMA-Script
(JavaScript bei Netscape, JScript bei (JavaScript bei Netscape, JScript bei Microsoft)Microsoft)
S. 11-12, Kapitel 11S. 11-12, Kapitel 11
JavaScript Rekapitulation:JavaScript Rekapitulation:Object – Property - Method Object – Property - Method
Object Object (Objekt)(Objekt)
var mycar = new Car();var mycar = new Car();(object = Substantiv)(object = Substantiv)
Property Property (Eigenschaft, Attribut)(Eigenschaft, Attribut)
mycar.color = „red“;mycar.color = „red“;(property = Adjektiv des Objekts)(property = Adjektiv des Objekts)
Method Method (Methode)(Methode)
mycar.accelerate();mycar.accelerate();(method = Verb des Objekts)(method = Verb des Objekts)
Das Document Object Das Document Object ModelModel
Das Document Object Model Das Document Object Model (DOM) ist eine (DOM) ist eine Programmierschnittstelle (API) Programmierschnittstelle (API) für HTML und XML Dokumentefür HTML und XML Dokumente
Das DOM macht alle Elemente Das DOM macht alle Elemente (Tags, Objekte) einer Webseite in (Tags, Objekte) einer Webseite in einem Objektbaum zugänglicheinem Objektbaum zugänglich
S. 9-11, Kapitel 9S. 9-11, Kapitel 9
DOM StrukturDOM Struktur
TheTheCurrentCurrentWindowWindow
self, window,parent, top
Various Window objects
navigatorNavigator object
frames[]array of Window objects
locationLocation object
historyHistory object
documentDocument 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 FormElement Objects:
Button Checkbox FileUpload Hidden Password Radio Reset Select Submit Text Textarena
options[]array of
Option objects
S. 9-11, Kapitel 9S. 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)
Die wichtigsten DOM-Die wichtigsten DOM-ObjekteObjekte
Standard-HTML-TagsStandard-HTML-Tags– Danny Goodman‘s Object RoadmapDanny Goodman‘s Object Roadmap
Container-ObjekteContainer-Objekte– DIV (Netscape 5+, IE 4+)DIV (Netscape 5+, IE 4+)– SPAN (Netscape 5+, IE 4+)SPAN (Netscape 5+, IE 4+)– LAYER (nur Netscape 4)LAYER (nur Netscape 4)
Übung 2a: Übung 2a: Datums-/ZeitanzeigeDatums-/Zeitanzeige
Eine sekundenweise aktualisierte Eine sekundenweise aktualisierte Uhr soll per DHTML auf die Seite Uhr soll per DHTML auf die Seite geschrieben werdengeschrieben werden
Dazu wird ein Containerobjekt Dazu wird ein Containerobjekt geschaffen (DIV), dessen Inhalt geschaffen (DIV), dessen Inhalt (Attribut innerHTML) jede Sekunde (Attribut innerHTML) jede Sekunde durch die aktuelle Zeit ersetzt wirddurch die aktuelle Zeit ersetzt wird
Welches sind die wichtigsten 3 Welches sind die wichtigsten 3 Zeilen dieses DHTML-Codes?Zeilen dieses DHTML-Codes?
CSSCSS
Cascading Style Sheets Cascading Style Sheets erlauben das Setzen und erlauben das Setzen und Verändern der Verändern der Darstellungseigenschaften Darstellungseigenschaften von Elementen einer von Elementen einer Webseite. Webseite.
Kapitel 3 + 10Kapitel 3 + 10
Welche Browser Welche Browser unterstützen CSS?unterstützen CSS?
Internet Explorer ab Version 3Internet Explorer ab Version 3 Netscape Navigator ab Version 4 Netscape Navigator ab Version 4
(stark fehlerbehaftet)(stark fehlerbehaftet) Opera ab Version 3.5Opera ab Version 3.5
Vier Arten von Cascading Vier Arten von Cascading Style SheetsStyle Sheets
Inline StylesInline Styles– Für jedes Element einzeln den Style definierenFür jedes Element einzeln den Style definieren
Embedded Style SheetsEmbedded Style Sheets– Styles spezifisch für eine Webseite definierenStyles spezifisch für eine Webseite definieren
External Style SheetExternal Style Sheet– Globale Styles für die gesamte Website Globale Styles für die gesamte Website
definierendefinieren Imported Style SheetImported Style Sheet
– Globale Styles für andere Stylesheets vorgebenGlobale Styles für andere Stylesheets vorgeben
Style-Attribut als Style-Attribut als Verbindung zu den CSS-Verbindung zu den CSS-PropertiesProperties
Jedes Objekt auf einer Seite hat ein Jedes Objekt auf einer Seite hat ein style-Attributstyle-Attribut
Das style-Attribut ist eine Das style-Attribut ist eine Collection, in der alle CSS-Attribute Collection, in der alle CSS-Attribute gesammelt sind und verändert gesammelt sind und verändert werden könnenwerden können
Netscape-Implementation ist Netscape-Implementation ist fehlerhaftfehlerhaft
Übung 2b: Übung 2b: Class "Uhr" definierenClass "Uhr" definieren
Grundlage: Seite aus Übung 2aGrundlage: Seite aus Übung 2a Definieren Sie die Klasse "Uhr" im Definieren Sie die Klasse "Uhr" im
eingebundenen Style Sheet mit den eingebundenen Style Sheet mit den folgenden Angaben:folgenden Angaben:
Schriftart (font-family): "Century Schriftart (font-family): "Century Gothic" und "Arial"Gothic" und "Arial"
Schriftgrösse (font-size): 36 PunkteSchriftgrösse (font-size): 36 Punkte Farbe (color): BlauFarbe (color): Blau Testen Sie die Seite mit IE4/5Testen Sie die Seite mit IE4/5
Übung 2c: Übung 2c: Funktionen ergänzenFunktionen ergänzen
Funktion "rot"Funktion "rot"– Ändert die Farbe (Attribut "color") des Elements Ändert die Farbe (Attribut "color") des Elements
"MicrosoftUhr" auf Rot (red oder #ff0000)"MicrosoftUhr" auf Rot (red oder #ff0000)– Ändert die Schriftgrösse (Attribut "font-size") des Ändert die Schriftgrösse (Attribut "font-size") des
Elements "MicrosoftUhr" auf 12 Punkte (12pt)Elements "MicrosoftUhr" auf 12 Punkte (12pt) Funktion "gruen"Funktion "gruen"
– Ändert die Farbe des Elements "MicrosoftUhr" Ändert die Farbe des Elements "MicrosoftUhr" auf Grün (green oder #00ff00)auf Grün (green oder #00ff00)
– Ändert die Schriftgrösse des Elements Ändert die Schriftgrösse des Elements "MicrosoftUhr" auf 24 Punkte (24pt)"MicrosoftUhr" auf 24 Punkte (24pt)
Testen Sie die Seite mit IE4/5Testen Sie die Seite mit IE4/5
Übung 3:Übung 3:interne/externe Hyperlinksinterne/externe Hyperlinks
Ziel: Ein DHTML-Script läuft durch Ziel: Ein DHTML-Script läuft durch alle Hyperlinks einer Seite durch und alle Hyperlinks einer Seite durch und verändert ihr Aussehen, wenn es verändert ihr Aussehen, wenn es sich um externe Hyperlinks handeltsich um externe Hyperlinks handelt
Vorteil: Autoren von Seiten müssen Vorteil: Autoren von Seiten müssen sich bei der Erstellung von Seiten sich bei der Erstellung von Seiten nicht um diese Kennzeichnung nicht um diese Kennzeichnung kümmernkümmern
Übung 3:Übung 3:interne/externe Hyperlinksinterne/externe Hyperlinks
a)a) ergänzen Sie den <body>-Tag so, dass die Funktion ergänzen Sie den <body>-Tag so, dass die Funktion "initialisieren()" beim Laden der Seite gestartet wird"initialisieren()" beim Laden der Seite gestartet wird
b)b) for-Schlaufe:for-Schlaufe:– ergänzen Sie die for-Schlaufe mit einem "if" und "else" Statementergänzen Sie die for-Schlaufe mit einem "if" und "else" Statement– b.1) if-Statement(externe Links):b.1) if-Statement(externe Links):
kontrollieren Sie, ob die ersten vier Zeichen des Links (Attribut href) kontrollieren Sie, ob die ersten vier Zeichen des Links (Attribut href) ="http" sind="http" sind
wenn das zutrifft, weisen Sie dem Link die Farbe Rot zuwenn das zutrifft, weisen Sie dem Link die Farbe Rot zu– b.2) else-Statement(interne Links):b.2) else-Statement(interne Links):
weisen Sie den restlichen Links(interne Links) die Farbe Grün zuweisen Sie den restlichen Links(interne Links) die Farbe Grün zu
c)c) testen Sie die Seite mit IE 4/5testen Sie die Seite mit IE 4/5d)d) fügen Sie weitere interne und externe Hyperlinks hinzu fügen Sie weitere interne und externe Hyperlinks hinzu
und testen Sie die Seite erneut mit IE 4/5 und testen Sie die Seite erneut mit IE 4/5
Identifizieren der Identifizieren der ElementeElemente
Jedem Element, dass Sie dynamisch Jedem Element, dass Sie dynamisch bearbeiten wollen, müssen Sie eine ID per bearbeiten wollen, müssen Sie eine ID per HTML-Attribut zuweisenHTML-Attribut zuweisen
Wenn Sie Elemente positionieren, sollten Wenn Sie Elemente positionieren, sollten Sie die Element in die "Container" <div> Sie die Element in die "Container" <div> oder <span> einschliessen. (Weder IE noch oder <span> einschliessen. (Weder IE noch Netscape unterstützt das Positionieren von Netscape unterstützt das Positionieren von nicht-Container-Elementen vollständig)nicht-Container-Elementen vollständig)
Die ID des Containers findet sich im DOM Die ID des Containers findet sich im DOM wiederwieder
ID im DOMID im DOM
IE 4/5IE 4/5– document.all.document.all.idid
Netscape 4Netscape 4– document.layers.document.layers.idid– Wenn Container in Containern liegen:Wenn Container in Containern liegen:
document.layers.document.layers.idid.document.layers..document.layers.idid
S. 80-85S. 80-85
Übung 4: Übung 4: DHTML PositionierungDHTML Positionierung
Element dynamisch verschiebenElement dynamisch verschieben function moveIE ist für IE 4/5 und function moveIE ist für IE 4/5 und
spricht das Objekt "objectIE" anspricht das Objekt "objectIE" an function moveNS ist für Netscape 4 function moveNS ist für Netscape 4
und spricht das Objekt "objectNS" anund spricht das Objekt "objectNS" an
Übung 4a) Übung 4a) DHTML PositionierungDHTML Positionierung
Rufen Sie mit den Hyperlinks die Rufen Sie mit den Hyperlinks die entsprechenden Funktionen auf (URL entsprechenden Funktionen auf (URL ist "Javascript:funktion()")ist "Javascript:funktion()")
Übergeben Sie der Funktion die Übergeben Sie der Funktion die entsprechenden Zielwerte (x/y) entsprechenden Zielwerte (x/y)
Übung 4b) Übung 4b) DHTML PositionierungDHTML Positionierung
Funktion "moveIE":Funktion "moveIE":– Übergeben Sie der Style-Übergeben Sie der Style-
Objekteigenschaft "pixelTop" des Objekteigenschaft "pixelTop" des Elements "elementIE" den Wert von "y"Elements "elementIE" den Wert von "y"
– Übergeben Sie der Style-Übergeben Sie der Style-Objekteigenschaft "pixelLeft" des Objekteigenschaft "pixelLeft" des Elements "elementIE" den Wert von "x" Elements "elementIE" den Wert von "x"
Übung 4c) Übung 4c) DHTML PositionierungDHTML Positionierung
Funktion "moveNS"Funktion "moveNS"– Übergeben Sie der Eigenschaft "top" des Übergeben Sie der Eigenschaft "top" des
Layer-Objekts "elementNS" den Wert von "y"Layer-Objekts "elementNS" den Wert von "y"– Übergeben Sie der Eigenschaft "left" des Übergeben Sie der Eigenschaft "left" des
Layer-Objekts "elementNS" den Wert von "x"Layer-Objekts "elementNS" den Wert von "x"
Testen Sie die Seite mit Netscape 4 und Testen Sie die Seite mit Netscape 4 und IE 4/5IE 4/5
Übung 4d) Übung 4d) DHTML PositionierungDHTML Positionierung
Funktion "moveNS"Funktion "moveNS"– Das Layer-Objekt besitzt die Das Layer-Objekt besitzt die
Methode(Method) "moveTo()"Methode(Method) "moveTo()"– Statt der "top"- und "left"-Eigenschaft Statt der "top"- und "left"-Eigenschaft
wenden Sie die Methode "moveTo()" an wenden Sie die Methode "moveTo()" an Testen Sie die Seite mit Netscape 4Testen Sie die Seite mit Netscape 4
4 Anwendungen von 4 Anwendungen von DHTMLDHTML
TexteffekteTexteffekte– Liquid HTMLLiquid HTML
NavigationseffekteNavigationseffekte– Information HidingInformation Hiding– Floating ContainersFloating Containers– Zweistufige Dropdown-NavigationZweistufige Dropdown-Navigation
Liquid HTMLLiquid HTML
Fliesstext schreibenFliesstext schreiben Zu erklärende Worte als Hyperlinks Zu erklärende Worte als Hyperlinks
markierenmarkieren Funktion schreiben, die Funktion schreiben, die
erklärenden Text erklärenden Text erscheinen/verschwinden lässterscheinen/verschwinden lässt
Beispiel in KursdateienBeispiel in Kursdateien
Information HidingInformation Hiding
Ein Gefäss für Intro-Text definieren Ein Gefäss für Intro-Text definieren (DIV)(DIV)
3 Hyperlinks mit Besucherprofilen 3 Hyperlinks mit Besucherprofilen (Entwickler, Endbenutzer, Entscheider)(Entwickler, Endbenutzer, Entscheider)
Je nach Hyperlink unterschiedliche Je nach Hyperlink unterschiedliche Inhalte im Intro-Text-Gefäss Inhalte im Intro-Text-Gefäss einblendeneinblenden
Beispiel in KursdateienBeispiel in Kursdateien
Floating ContainersFloating Containers
DIVs mit Inhalten definierenDIVs mit Inhalten definieren Auf Mausklick DIV aufnehmen, Auf Mausklick DIV aufnehmen,
ablegenablegen http://www.teamone.de/selfhtml/http://www.teamone.de/selfhtml/
tfcb.htmtfcb.htm
Zweistufige Dropdown-Zweistufige Dropdown-NavigationNavigation
Formular mit Dropdown und Go-ButtonFormular mit Dropdown und Go-Button– http://http://starsstars..comcom//AuthoringAuthoring/HTML//HTML/FormsForms//
selectselect_s._s.htmlhtml Option 1: Objektmethode bei Dropdown-Option 1: Objektmethode bei Dropdown-
AuswahlAuswahl– http://http://wwwwww..ceicei..netnet/~/~rgriebelrgriebel/drop./drop.htmlhtml
Option 2: Ändern des Dropdown 2 Option 2: Ändern des Dropdown 2 aufgrund Auwahl Dropdown 1aufgrund Auwahl Dropdown 1– http://bronze.http://bronze.chch/deutsch//deutsch/prodprod/halb/halb
Verschiedene Formen von Verschiedene Formen von DHTMLDHTML
W3C-DOM-StandardW3C-DOM-Standard IE4-/IE5-ImplementationIE4-/IE5-Implementation Netscape 4 – Implementation Netscape 4 – Implementation Netscape 5 - ImplementationNetscape 5 - Implementation
Cross-Browser DHTML Cross-Browser DHTML
Der erste Schritt:Der erste Schritt: Was sind meine Ziele?Was sind meine Ziele? Welche Browser benützt meine Welche Browser benützt meine
Zielgruppe?Zielgruppe?
Kapitel 2, S. 86-93Kapitel 2, S. 86-93
Beispielszenarien: Beispielszenarien:
Alle Browser müssen dieselbe Alle Browser müssen dieselbe Funktionalität erhaltenFunktionalität erhalten
Wir senden alle nicht-DOM-Wir senden alle nicht-DOM-kompatiblen Browser zu einer nur-kompatiblen Browser zu einer nur-Text-Variante der SiteText-Variante der Site
Browser von Version 4.0 oder höher Browser von Version 4.0 oder höher erhalten dynamische Version, alle erhalten dynamische Version, alle andern müssen bloss lesen und andern müssen bloss lesen und navigieren könnennavigieren können
Kapitel 2, S. 86-93Kapitel 2, S. 86-93
Branching Branching
Browserversions-UnterscheidungBrowserversions-Unterscheidung Auf 3 Ebenen möglichAuf 3 Ebenen möglich
– High Level BranchingHigh Level Branching Mehrere Seiten für mehrere BrowserMehrere Seiten für mehrere Browser
– Mid Level BranchingMid Level Branching Frühe Zuweisung symbolischer VariabelnFrühe Zuweisung symbolischer Variabeln
– Low Level BranchingLow Level Branching Jedes Statement mit IF versehenJedes Statement mit IF versehen
S. 21-27S. 21-27
High Level BranchingHigh Level Branching
Browser/Version?
ns4.htm dom.htmnodhtml.htm
Netscape 4 IE 4+, Netscape 5+
andere
Mid Level BranchingMid Level Branching
page.htm
Browser/Version?
ns4var objects = document.layers
function myFunc(myObject)myId = objects.myObject.id
domvar objects = document.all
Netscape 4 IE 4+, Netscape 5+
Low Level BranchingLow Level Branching
page.htm
function changeBG(myObj)
Browser/Version?
objects.myObj.bgColor= „red“ objects.myObj.style.backgroundColor=„red“
Netscape 4 IE 4+, Netscape 5+
Browser-UnterscheidungBrowser-Unterscheidung
ClientseitigClientseitig– Navigator-ObjektNavigator-Objekt– document.all / document.layers document.all / document.layers
Serverseitig (IIS 4, ASP)Serverseitig (IIS 4, ASP)– browscap.inibrowscap.ini– BrowserHawkBrowserHawk
http://http://wwwwww..browscapbrowscap..comcom
S. 26, 661-667S. 26, 661-667
Übung 5: Übung 5: Mid Level BranchingMid Level Branching
Verschachtelte Layer ansprechenVerschachtelte Layer ansprechen testen Sie die Seite mit Netscape 3 testen Sie die Seite mit Netscape 3
+ 4 und IE 3 + 4/5+ 4 und IE 3 + 4/5 schauen Sie sich den Code an und schauen Sie sich den Code an und
versuchen Sie, die Schritte versuchen Sie, die Schritte nachzuvollziehennachzuvollziehen
TippsTipps
Entwickeln Sie auf Netscape 4, da sie dann die Entwickeln Sie auf Netscape 4, da sie dann die schwierigste Hürde bereits genommen habenschwierigste Hürde bereits genommen haben
Testen auf Sie auf allen Browsern, die in Ihr Testen auf Sie auf allen Browsern, die in Ihr Besucherprofil passenBesucherprofil passen
Schreiben Sie Funktionen in externe js-Schreiben Sie Funktionen in externe js-Dateien (werden gecacht)Dateien (werden gecacht)
Erfinden Sie das Rad nicht neu und benutzen Erfinden Sie das Rad nicht neu und benutzen Sie Scripts und API-libraries, die auf Sie Scripts und API-libraries, die auf verschiedenen Seiten kostenlos zur Verfügung verschiedenen Seiten kostenlos zur Verfügung stehen stehen
Custom APIsCustom APIs
The Dynamic DuoThe Dynamic Duo– http://http://wwwwww..dansteinmandansteinman..comcom//dynduodynduo//– The Dynamic Layer Object APIThe Dynamic Layer Object API
http://http://wwwwww..dansteinmandansteinman..comcom//dynduodynduo/en//en/dynlayerdynlayer..htmlhtml
SiteExperts.ComSiteExperts.Com– http://http://wwwwww..siteexpertssiteexperts..comcom– DHTMLLib 2.0DHTMLLib 2.0
http://http://wwwwww..siteexpertssiteexperts..comcom//dhtmllibdhtmllib/page1./page1.aspasp
LinksLinks Research und TutorialsResearch und Tutorials
– http://http://wwwwww..dhtmlzonedhtmlzone..comcom– http://http://wwwwww..netzweltnetzwelt..comcom//selfhtmlselfhtml//tftf.htm.htm– http://http://wwwwww..dynamicdrivedynamicdrive..comcom– http://http://wwwwww..webdeveloperwebdeveloper..comcom//advhtmladvhtml– http://http://dhtmldhtml..seiteseite..netnet– http://http://wwwwww..brattabratta..comcom– http://http://wwwwww..projectcoolprojectcool..comcom//developerdeveloper//dynamicdynamic//– http://http://wwwwww..webreferencewebreference..comcom//dhtmldhtml//– http://http://developerdeveloper..netscapenetscape..comcom//techtech//dynhtmldynhtml//indexindex..htmlhtml– http://http://msdnmsdn..microsoftmicrosoft..comcom//workshopworkshop//authorauthor//defaultdefault..aspasp– http://www.htmlguru.comhttp://www.htmlguru.com
LinksLinks
Beispiele:Beispiele:– http://http://wwwwww..leicaleica--geosystemsgeosystems..comcom– http://http://wwwwww..borgstromborgstrom..comcom– http://www.desktop.comhttp://www.desktop.com– http://www.corenet.chhttp://www.corenet.ch– http://cordoba.seat.eshttp://cordoba.seat.es– http://www.terrarium.nuhttp://www.terrarium.nu– http://www.zkb.chhttp://www.zkb.ch– http://www.htmlguru.comhttp://www.htmlguru.com
Viel ErfolgViel Erfolg